CSS第一个孩子不起作用[重复]答案

【问题标题】：CSS first-child not working [duplicate]CSS第一个孩子不起作用[重复]
【发布时间】：2017-10-06 22:19:21
【问题描述】：

遇到一个奇怪的问题

对于HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li class="has-item">four</li>
    <li>five</li>
</ul>

这有效：

ul li:first-child {
  font-size:30px
}

但是为什么不这个

ul li.has-item:first-child {
  font-size:8px
}

小提琴： https://jsfiddle.net/xx9us2sg/1/

【问题讨论】：

错误是，你的 li 与 has-item 类不是 ul 的 first-child。
如果 li:first-child 选择了 ul 类型为 li 的第一个孩子，那么为什么 li.has-item:first-child 不选择 ul 类型为 .first 的第一个孩子-项目
@FahadSohail 因为:first-child 不是这样工作的。请参阅我上面发布的链接。
您误解了first-child 选择器。 first-child 选择器选择父级的第一个子级。在这种情况下，父级是 ul 和 Here is an Example of what i mean

【解决方案1】：

:first-child 伪类，与所有其他与:nth-child() 相关的伪类一样，计算所有同级（即具有相同父级的元素）。类被忽略，因为它们与 DOM 结构无关。

所以:first-child 总是第一个兄弟。

这...

ul li.has-item:first-child {
  font-size:8px
}

不起作用，因为.has-item 不代表任何东西的:first-child。第一个孩子永远是<li>one</li>。

【讨论】：