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 ::选择选择不

回答

相关问题