我的CSS第一个孩子pseydo-selector以相反的方式工作[重复]

Question

此问题已经在这里有了答案：

Different behavior for pseudo-class with space and without space（4个答案）

What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?（4个答案）

关闭3分钟前。

在列表中选择第一个孩子的语法为li：first-child {color：blue;}，但不起作用。相反，当我像ul：first-child {color：blue;}那样以相反的方式编写它时，它就可以正常工作。对不对？

Answer 1

您应该在没有空格的情况下设置:first-child为li。

li:first-child{color:blue;}

另一种方法也是正确的，因为您正在设置ul内部元素的第一个孩子。 ul跟空格表示选择<ul>元素内的所有元素

ul :first-child{color:blue;}

您可以参考w3schools tutorial了解更多信息。

/* Both setting the same li to blue */
li:first-child{color:blue;}
ul :first-child{color:blue;}

<ul>
  <li> Item 1 </li>
  <li> Item 2 </li>
  <li> Item 3 </li>
</ul>