css - 伪元素样式优先

我在玩伪元素风格的游戏，遇到了令我困惑的行为

考虑以下css和html

HTML:

 <p>
        Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::.
    </p>

和样式

p::first-letter {
    font-size: 20px;
    color: red;
}

p::first-line {
    font-variant: small-caps;
    color: green;
}

p::before {
    content: 'Start';
    color: blue;
}

在Chrome中，行为如下::: before内容的第一个字母显示为红色，即使其不包含p和:: before样式的内容也不会将颜色覆盖为蓝色。


同样，当:: before内容中没有字母，并且在其中放置＆或*时-所有第一行都变为绿色，并且没有应用:: first-letter和:: before样式。

在Firefox中，提供的代码结果如下:


我正在Ubuntu 17.04下使用最新的浏览器版本

因此，谁能解释为什么:: before内容被其他伪元素选择器选择并应用了样式，以及为什么自己的:: before样式即使它们是“后”样式也不会覆盖它们。

最佳答案

至于第一行和第一个字母，这实际上不是特异性的问题。只是这样指定:



(source)

关于css - 伪元素样式优先，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45326022/