为什么CSS Descendant Combinator不会覆盖类选择器的样式

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个元素。请参阅relevant spec以获取p元素可包含的元素列表。

由于它无效，这就是元素的呈现方式：

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

段落仍然是红色的，因为选择器p .c11将选择一个c11类的元素，该元素是p元素的后代。选择器p .c11中的空格是descendant combinator。由于您无法嵌套p元素，因此选择器p .c11不会选择任何内容。