li：not（.classname）：第一个子选择器没有选择

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。

Answer 2

它不起作用，因为你告诉你的CSS寻找：

• 没有li类
的.item-header

<强> 和

• 列表的第一项

列表的第一项 HAS 该课程。没有任何反应。

<强> A little check.

您的规则仅适用于我制作的第一个示例，因为li会确认您制定的规则。

Josh Crozier's answer

报告了这样做的好方法