css - li :not(. classname):first-child 选择器未选择

Question

我有以下列表

<ul>
  <li class="item-header">header</li>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

我想选择<li>item1</li>仅并使用以下选择器为其分配填充。这是我的 css 所做的:

  li:not(.item-header):first-child {
    padding-top: 2em;
  }

它没有选择任何东西。我做错了什么？

Answer 1

:first-child 伪类不是这样工作的。它没有像您预期的那样工作，因为该元素不是第一个子元素。

要涵盖第一个子元素确实具有 item-header 类的实例，请通过使用相邻兄弟组合器 +< 选择后续的 li 元素.

li:not(.item-header):first-child,
li.item-header:first-child + li {
    padding-top: 2em;
}

现在应该可以正常工作了 - example .