为什么 CSS 后代组合器不会覆盖类选择器的样式

Question

我在规范Calculating a selector's specificity 中使用了示例来确定选择器的权重。两个选择器都具有特异性：11 分。 11 = 10（类名）+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>

Answer 1

因此，我的问题是为什么该段落仍然是红色的？

您的 HTML 无效。您不能嵌套 p 元素。有关p 元素可以包含的元素列表，请参阅relevant spec。

由于它无效，这就是元素的渲染方式：

<p class="c11">Lorem ipsum dolor...</p>
<p></p>

段落仍然是红色的，因为选择器p .c11 将选择一个类为c11 的元素，它是p 元素的后代。选择器p .c11 中的空格是descendant combinator。由于您不能嵌套 p 元素，所以选择器 p .c11 没有选择任何内容。