CSS第一个孩子不工作

Question

遇到一个奇怪的问题

对于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/

Answer 1

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

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

这个...

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

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