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

Question

我在规范Calculating a selector's specificity 中使用了示例来确定选择器的权重。两个选择器都有特殊性：11 分。11 = 10（类名）+ 1（元素名）

根据规范w3c 级联规则，第二个选择器应该覆盖第一个选择器，因为它出现在文件的后面。因此，我的问题是为什么该段仍然是红色的？

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。

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

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

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