为什么 CSS 后代组合器不覆盖 Class 选择器的样式
Why CSS Descendant Combinator doesn't overrides styles of Class Selector
我在规范 Calculating a selector's specificity 中使用示例来确定选择器权重。两个选择器都有特异性：11 点。
11 = 10（class 名称）+ 1（元素名称）
根据规范w3c cascading rules，第二个选择器应该覆盖第一个，因为它出现在文件的后面。
所以，我的问题是为什么该段还是红色的？
p.c11 {
color: darkred;
}
p .c11 {
color: magenta;
}
<p>
<p class="c11">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, eius iusto provident laudantium voluptates adipisci voluptatem amet repudiandae ex aspernatur rem voluptatibus recusandae vero corporis distinctio quia reprehenderit dolores facere.
</p>
</p>
Therefore, my question is why the paragraph is still red?
您的HTML无效。您不能嵌套 p 个元素。有关 p 元素可以包含的元素列表，请参阅 relevant spec。
由于无效，元素的呈现方式如下：
<p class="c11">Lorem ipsum dolor...</p>
<p></p>
该段落仍然是红色的，因为 select 或 p .c11 将 select 具有 c11 的 class 的元素是 a 的后代p 元素。 select或p .c11中的space是descendant combinator。由于您不能嵌套 p 元素，因此 select 或 p .c11 不是 selecting 任何东西。
我在规范 Calculating a selector's specificity 中使用示例来确定选择器权重。两个选择器都有特异性：11 点。 11 = 10（class 名称）+ 1（元素名称）
根据规范w3c cascading rules，第二个选择器应该覆盖第一个，因为它出现在文件的后面。 所以，我的问题是为什么该段还是红色的？
p.c11 {
color: darkred;
}
p .c11 {
color: magenta;
}
<p>
<p class="c11">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, eius iusto provident laudantium voluptates adipisci voluptatem amet repudiandae ex aspernatur rem voluptatibus recusandae vero corporis distinctio quia reprehenderit dolores facere.
</p>
</p>
Therefore, my question is why the paragraph is still red?
您的HTML无效。您不能嵌套 p 个元素。有关 p 元素可以包含的元素列表，请参阅 relevant spec。
由于无效，元素的呈现方式如下：
<p class="c11">Lorem ipsum dolor...</p>
<p></p>
该段落仍然是红色的，因为 select 或 p .c11 将 select 具有 c11 的 class 的元素是 a 的后代p 元素。 select或p .c11中的space是descendant combinator。由于您不能嵌套 p 元素，因此 select 或 p .c11 不是 selecting 任何东西。