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

此外,当内容中没有字母时,我放了&或者* – 所有第一行变为绿色,并且在应用样式之前没有:: first-letter和::.

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

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

因此,任何人都可以解释为什么::在内容被其他伪元素选择器选中并且应用了样式以及为什么拥有::之前的样式不会覆盖它们,即使它们是“更晚”的样式.