伪元素样式优先

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和::之前的内容样式也不会将颜色覆盖为蓝色.

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

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

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

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

Answer 1

至于第一行和第一个字母，这并不是具体的问题。它只是这样指定的：

与常规元素的内容一样， ::before 和 :after 伪元素的生成内容可以包含在应用于其原始元素的任何 ::first-line 和 ::first-letter 伪元素中。

（来源）