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

Question

I have a question regarding the following pseudo-class selector.我对以下伪类选择器有疑问。 Even with !important , the text under this li:first-child is not showing blue.即使使用!important ，此li:first-child下的文本也不会显示为蓝色。

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

I am expecting the xyz to be blue but it is red.我期待 xyz 是蓝色的，但它是红色的。 Unless comment out CSS for p (red color).除非注释掉 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>

After reviewing the answer, the new code is good:查看答案后，新代码很好：

<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

The li:first-child makes the color of the <li> blue, but the <p> is still red. li:first-child使<li>的颜色变为蓝色，但<p>仍然是红色。

li:first-child selects the li that is a first child, not the first child of the li. 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>

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

问题描述

2 个解决方案

解决方案1
2 2022-09-19 02:46:25

解决方案2
0 2022-09-19 08:44:43

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

问题描述

2 个解决方案

解决方案1 2 2022-09-19 02:46:25

解决方案2 0 2022-09-19 08:44:43

解决方案1
2 2022-09-19 02:46:25

解决方案2
0 2022-09-19 08:44:43