CSS 特异性 - CSS 选择器之间的冲突

Question

我对以下伪类选择器有疑问。 即使使用!important ，此li:first-child下的文本也不会显示为蓝色。

p 具有选择器特异性：(0, 0, 1) li:first-child 具有选择器特异性：(0, 1, 1)

我期待 xyz 是蓝色的，但它是红色的。 除非注释掉 p（红色）的 CSS。

 p { color: red; } li:first-child { color: blue;important: list-style; none; }

 <p>abc</p> <aside> <ul> <li> <p>xyz</p> </li> </ul> </aside>

查看答案后，新代码很好：

<html lang="en">
  <head>
    <title>Test</title>
    <style>
      p {
        color: red;
      }
      li:first-child p {
        color: blue;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <p>abc</p>
    <ul>
      <li><p>xyz</p></li>
    </ul>
  </body>
</html>

Answer 1

li:first-child使<li>的颜色变为蓝色，但<p>仍然是红色。

li:first-child选择作为第一个孩子的li，而不是li 的第一个孩子。

Answer 2

 p { color: red; } li:first-child p { color: blue;important: list-style; none; }

 <p>abc</p> <aside> <ul> <li> <p>xyz</p> </li> </ul> </aside>