Question

我正在使用CSS3 ::section选择器

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

Answer 1

请注意per MDN

在规则中只能使用一小部分CSS属性 ::选择器中的选择：颜色，背景，背景颜色和文字阴影。请注意，特别是背景图像被忽略，像任何其他财产一样。

链接上的行是text-decoration的一部分，伪选择器不会考虑这一行。您最好的选择可能是使用

删除它

a{
 text-decoration:none;
}

您可能还想注意：

虽然这个伪元素是CSS Selectors Level 3的草稿，但它   在候选推荐阶段（link）
期间被删除
:: selection伪元素当前不在任何CSS模块中   标准的轨道。它不应该在生产环境中使用。

Further information

Answer 2

bugzilla上有一个旧的bug report与你的问题有关。正如您在comment 26中看到的那样，选择实际上是一个额外的匿名元素，这就是为什么周围锚点的文本修饰不会改变其颜色的原因，因为选择器仅适用于此“子”：<span>The word <span::selection>select</span::selection> is selected</span>

CSS3 ::选择器在锚标签上无法正常工作

2 个答案: