使用CSS

標籤元素中改變文本我有一個代碼片段：使用CSS

<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>

我想通過CSS改變<label for .. >字段中的文本。

我知道我可以通過放置此代碼段的副本並使用css來切換。但是，我想要做到最小代碼更改。可能會使用一些CSS技巧來更改<label for..>文本，並且完全不影響<label for...>中的代碼。

來源

2013-03-05 CodeMonkey

CSS代表樣式HTML代表標記。甚至不要試圖與另一個做一個。 – 2013-03-05 01:28:51

如果不能更改html，通常會使用JavaScript來完成，而不是使用CSS。爲什麼你不能使用JS有一個特別的原因嗎？ – Zoe 2013-03-05 01:31:49

是的，我沒有使用JS，因爲內容正在基於CSS3媒體查詢進行更改。 – CodeMonkey 2013-03-05 01:34:27

你不能用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!'}

然而，僅僅因爲你並不意味着你應該。這是一個可訪問性的噩夢，你可以想象以後再回來，試圖找出文本來自哪裏，如果不是來自HTML？

來源

2013-03-05 01:31:09

你可以更新與確切的執行地點的片段 – CodeMonkey 2013-03-05 01:36:16

不，我很抱歉。我強烈不鼓勵使用此代碼。由於您可能使用JavaScript來切換類，請使用它來更改文本。 – 2013-03-05 01:37:15

不，我正在使用CSS切換類，使用塊，溢出：隱藏等 – CodeMonkey 2013-03-05 01:40:08

你可以only change the content之前和之後用CSS僞裝。 Ali Bassam在下面的答案顯示了一種'hacky'方式來顯示父元素上的僞元素內容，以便您可以控制它。這個解決方案的問題包括，好像它看起來好像還有僞裝元素。但是這對您的項目可能沒有問題。

要考慮的另一件事是，你將有限的控制切換CSS。你的兩個選項是media queries和熟悉的pseudo classes。如果您的切換需求超出了這些人的能力，那麼您最好做到turning to Javascript.

來源

2013-03-05 01:32:39 jmeas

我知道JS是選項。但不想使用它。 – CodeMonkey 2013-03-05 01:35:38

回答

相關問題