CSS3 ::選擇選擇不

我使用CSS3 ::section選擇這樣CSS3 ::選擇選擇不

::selection{ 
    color:red; 
    background-color:pink; 

} 
::-moz-selection { 
    color:red; 
    background-color:pink; 

}

所以，當某些元素被選中它應該改變其顏色爲紅色和粉紅色背景的錨標記上正常工作。

它可以像預期的那樣工作，而不是Anchor標記<a>。

選中錨文本後，它會將樣式應用於鏈接文本，但不會應用於錨文本下面的行。

的jsfiddle：http://jsfiddle.net/GcBT2/1/

那麼，如何才能應用樣式下劃線也？

PS：瀏覽器測試：Chrome 31或和Firefox 25.0.1

來源

2013-12-18 Shiva

我正在建議CSS ['text-decoration-color']（https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color），但我無法讓它工作。我可能會做錯，雖然：http://jsfiddle.net/GcBT2/3/ –

@Olylyodgson'文字裝飾顏色'只在Firefox的支持。檢查http://jsfiddle.net/GYw7g/。除了':: selection'不支持這個屬性，如規格中所述。 – nkmol

@nkmol我在Firefox每晚都試過:) –

注意per MDN

只有CSS屬性的一小部分可以在規則中使用使用 ::在其選擇的選擇：顏色，背景，背景顏色和文字陰影。請注意，特別是，背景圖像將被忽略，與其他任何屬性一樣。

鏈接上的行是text-decoration的一部分，僞選擇器沒有考慮它。您最好的選擇或許是使用

a{ 
text-decoration:none; 
}

將其刪除您可能要還注意到：

雖然這個僞元素在CSS選擇器的草稿第3級，它在取出候選推薦階段（link）

::選擇僞元素當前不在任何CSS模塊上的標準軌道。它不應該用於生產環境。

Further information

來源

2013-12-18 12:13:19 SW4

感謝您的回答，您再次證明，MDN通常比官方W3C規範具有更好的信息。 :) – Shiva

有一個古老的bug report在Bugzilla的內容涉及您的問題。正如你在comment 26中看到的，一個選擇實際上是一個額外的匿名元素，這就是爲什麼周圍錨點的文本修飾不會改變它的顏色，因爲選擇器只適用於這個「子」：<span>The word <span::selection>select</span::selection> is selected</span>。

來源

2013-12-18 12:33:58 Simon

感謝您提供見解並深入Bugzilla :) – Shiva

CSS3 ::選擇選擇不

回答

相關問題