伪元素样式优先

Question

我正在玩伪元素风格，并且遇到了困扰我的行为

考虑以下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中，行为如下：内容之前的第一个字母为红色，即使它不是p和::之前的内容样式也不会将颜色覆盖为蓝色。 Fixed Plunker

当内容中没有字母时，我放了＆amp;或*那里 - 所有第一行变为绿色，并且在应用样式之前没有:: first-letter和::

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

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

所以有人可以解释为什么::在内容被其他伪元素选择器选中之前应用了样式以及为什么拥有::之前的样式不会覆盖它们，即使它们是“更晚”的样式。

Answer 1

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

  

与常规元素的内容一样，生成的内容   :: before和：after伪元素可以包含在any中   ::应用于它的第一行和:: first-letter伪元素   原始元素。

（source）