我正在玩伪元素风格,并且遇到了让我困惑的行为
考虑以下css和html
HTML：
Syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::.
@H_403_12@
和风格
p::first-letter {
font-size: 20px;
color: red;
}
p::first-line {
font-variant: small-caps;
color: green;
}
p::before {
content: 'Start';
color: blue;
}
@H_403_12@
在Chrome中,行为如下：内容之前的第一个字母为红色,即使它不是p和::之前的内容样式也不会将颜色覆盖为蓝色.
此外,当内容中没有字母时,我放了&或者* – 所有第一行变为绿色,并且在应用样式之前没有:: first-letter和::.
在Firefox中,提供的代码的结果如下：
我在Ubuntu 17.04下使用最新的浏览器版本
因此,任何人都可以解释为什么::在内容被其他伪元素选择器选中并且应用了样式以及为什么拥有::之前的样式不会覆盖它们,即使它们是“更晚”的样式.
最佳答案
至于第一行和第一个字母,这实际上不是特异性问题.它只是这样指定：
As with the content of regular elements,the generated content of
::before and :after pseudo-elements may be included in any
::first-line and ::first-letter pseudo-elements applied to its
originating element.
(source)
