CSS第一个孩子不工作

时间:2017-10-06 13:59:28

标签: html css css-selectors

面对一个奇怪的问题

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

1 个答案:

答案 0 :(得分:1)

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

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

此...

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

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

相关:Why is nth-child selector not working?