伪元素样式优先级

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的内容，::before内容的第一个字母仍然被着色为红色，并且::before样式没有将颜色覆盖为蓝色。 此外，当::before内容中没有字母并且我输入&或*时，所有第一行都变成绿色，并且没有应用::first-letter和::before样式。

在Firefox中，提供的代码的结果将如下所示： 我正在Ubuntu 17.04下使用最新的浏览器版本。

那么有人能解释一下为什么其他伪元素选择器选择了::before内容并应用了它们的样式，而自己的::before样式却不能覆盖它们，即使它们是“后来”的样式吗？

- Olena Horal

---

所有选择器的特异性都是2，所以我会说最后一个胜出。但实际上并非如此。 - Olena Horal

不，我的第一个字母是红色的，而不是蓝色的。 - Olena Horal

啊，抱歉，我误读了你的帖子哈哈，我会删除我的评论的 :) - treyBake

伪元素对选择器的特异性有贡献，但是具有不同伪元素的两个规则不会相互竞争，即使每个选择器的其余部分相同。因此，在这里特异性并不相关。在Chrome中，::first-line样式“覆盖”了::before和::after样式的问题不是新问题，但在问题跟踪器或www-style中似乎没有任何讨论。 - BoltClock

Answer 1

关于第一行和第一个字母，这并不是特定性的问题。只是像这样指定：

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

（来源）

- Denys Séguret

---

谢谢，这解释了为什么::first-line和::first-letter的样式会被应用。但是为什么最后一个(::before)没有生效呢？ - Olena Horal

@OlenaHoral 我对这个不确定。当你为伪元素设置样式时，似乎存在许多未指定（或至少不清楚的）行为，因为它们本身就是规则结果的存在。 - Denys Séguret

@OlenaHoral 无论如何现在不要接受我的答案，你的问题值得更好的回答。 - Denys Séguret

这是最好的答案了。可怕的“可能”措辞（仅在涉及::before/::after时省略虚构标记序列而变得更糟）意味着没有浏览器是正确或错误的。 Chrome的行为更接近规范，但出于某种原因，其他所有人的行为似乎更接近作者的期望。在我看来，只有::first-letter而不是::first-line优先于::before/::after样式是没有意义的。 - BoltClock