伪元素样式优先答案

【问题标题】：Pseudo-elements styles priority伪元素样式优先
【发布时间】：2018-01-01 17:18:40
【问题描述】：

我在玩伪元素样式时遇到了一个令我困惑的行为

考虑下面的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 样式即使它们是“后来的”样式也不会覆盖它们。

【问题讨论】：

所有选择器的特异性是 2。所以我会说最后一个获胜。但它没有
不，我的第一个字母是红色而不是蓝色
抱歉，误读了你的帖子哈哈会删除我的cmets :)
伪元素有助于选择器的特异性，但是具有不同伪元素的两条规则不会相互竞争，即使每个选择器的其余部分相同。所以特异性在这里不相关。这个 ::first-line 样式在 Chrome 中“覆盖” ::before 和 ::after 样式的问题是not new，但在问题跟踪器或 www-style 中似乎没有对此进行任何讨论。

标签： css css-selectors pseudo-element

【解决方案1】：

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

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

(source)

【讨论】：

谢谢，这确实解释了为什么应用 ::first-line 和 ::first-letter 的样式。但是为什么最后一个（即::before）没有获胜？
@OlenaHoral 我不确定这个。当您为伪元素设置样式时，似乎有很多未指定（或至少不清楚）的行为，因为它们本身作为规则的结果而存在。
@OlenaHoral 无论如何现在不要接受我的回答，你的问题值得更好的回答。
这是一个很好的答案。可怕的“可能”措辞（只是在涉及 ::before/::after 时省略了虚构的标签序列而变得更糟）意味着没有浏览器是对的或错的。 Chrome 的行为更接近规范，但出于某种原因，其他所有人的行为似乎更接近作者的预期。 IMO 仅 ::first-letter 而不是 ::first-line 优先于 ::before/::after 样式是没有意义的。