I have a code snippet:
我有一个代码片段：
<fieldset class="shareMe"><br />
<input type="checkbox" id="share_me" name="share_me" value="1" {if $default_share_pref}checked="checked"{/if} onclick="if (this.checked) { var perms = 'publish_stream'; fb_login_cached(function(response){ if (!response.perms.match(new RegExp(perms))) $('share_me').checked = false; }, perms); }"/>
<label for="share_me">Post this question to my friends on
<span class="">
<a class="fb_button fb_button_small">
<span class="fb_button_text">Facebook</span>
</a>
</span>.
</label>
</fieldset>
I want to change the text in <label for .. > field via CSS.
我想通过CSS更改
I know i can do it by placing duplicate copy of this snippet and use css to toggle. However, i want to do it minimum code change. May be using some CSS trick to change <label for..> text and not affecting the code inside <label for...> at all.
我知道我可以通过放置此代码段的副本并使用css进行切换来实现。但是，我想做最小的代码更改。可能正在使用一些CSS技巧来更改
2 个解决方案
#1
6
You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:
您无法使用CSS更改文本。此规则的例外是:: before和:: after伪装元素。从理论上讲，您可以使用类来切换文本，如下所示：
label[for="share_me"]:before{content:'Post this question to my friends on '}
label[for="share_me"].othertext:before{content:'Some other text!'}
However, just because you can doesn't mean you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?
但是，仅仅因为你并不意味着你应该。这是一个可访问性的噩梦，你能想象以后回来并尝试找出文本来自哪里，如果不是来自HTML？
#2
2
You can only change the content of :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE support of pseudo elements. But that might not be problematic for your project.
您只能使用CSS更改伪元素之前和之后的内容：下面的Ali Bassam的答案显示了一种“hacky”方式，可以在父母身上显示伪元素内容，以便您可以控制它。这个解决方案的问题包括，看起来有多酷，以及有限的IE对伪元素的支持。但这可能不会对您的项目造成问题。
Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.
另一件需要考虑的事情是，您对CSS切换的控制有限。您的两个选项是媒体查询和熟悉的伪类。如果您的切换需求超出了那些人的能力，那么您最好转向使用Javascript。
#1
6
You can't change text with CSS. The exception to this rule is the ::before and ::after psuedo-elements. In theory you could use classes to toggle the text like so:
您无法使用CSS更改文本。此规则的例外是:: before和:: after伪装元素。从理论上讲，您可以使用类来切换文本，如下所示：
label[for="share_me"]:before{content:'Post this question to my friends on '}
label[for="share_me"].othertext:before{content:'Some other text!'}
However, just because you can doesn't mean you should. It's an accessibility nightmare, and can you imagine coming back later and trying to work out where the text is coming from if not from the HTML?
但是，仅仅因为你并不意味着你应该。这是一个可访问性的噩梦，你能想象以后回来并尝试找出文本来自哪里，如果不是来自HTML？
#2
2
You can only change the content of :before and :after pseudoelements with CSS. Ali Bassam's answer below shows a 'hacky' way to display the pseudoelements content over the parent so that you can control it. Problems with this solution include, well, how hacky it seems and also the limited IE support of pseudo elements. But that might not be problematic for your project.
您只能使用CSS更改伪元素之前和之后的内容：下面的Ali Bassam的答案显示了一种“hacky”方式，可以在父母身上显示伪元素内容，以便您可以控制它。这个解决方案的问题包括，看起来有多酷，以及有限的IE对伪元素的支持。但这可能不会对您的项目造成问题。
Another thing to consider is that you'd have limited control over the toggle with CSS. Your two options are media queries and the familiar pseudo classes. If your toggling needs go beyond what those guys can do, you'd do best turning to Javascript.
另一件需要考虑的事情是，您对CSS切换的控制有限。您的两个选项是媒体查询和熟悉的伪类。如果您的切换需求超出了那些人的能力，那么您最好转向使用Javascript。