CSS first-child不起作用

Question

3

面临奇怪的问题

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

Fiddle: https://jsfiddle.net/xx9us2sg/1/

- Fahad Sohail

1

错误在于，具有“ has-item”类的“ li”不是“ ul”的“ first-child”。 - DomeTune

如果li:first-child选择类型为li的ul的第一个子元素，那么为什么li.has-item:first-child不能选择类型为li且类为.first-item的ul的第一个子元素？ - Fahad Sohail

@FahadSohail 因为这不是 :first-child 的工作方式。请参见我上面发布的链接。 - TylerH

你误解了 first-child 选择器。first-child 选择器选中的是父元素的第一个子元素。在这个例子中，父元素是 ul，这里是我所指的示例。 - DomeTune

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

:first-child伪类和其他:nth-child()相关的伪类一样，都会计算所有同级元素（即具有相同父元素的元素）。类将被忽略，因为它们与DOM结构无关。因此，:first-child总是第一个同级元素。这个...

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

不起作用是因为.has-item并不代表任何东西的:first-child。第一个子元素将始终是<li>one</li>。