如何选择所有没有ul

Question

我想要做的是选择<li>没有内部<ul>。

我尝试使用上面的选择器，但它不起作用。

.level1:not(:has(ul)) {
  background: red;
}

<ul>
  <li class="level1">Link1</li>
  <li class="level1">Link2
    <ul>
      <li>Link2</li>
    </ul>
  </li>
</ul>

Answer 1

将另一个类添加到不包含li的{​​{1}}，然后将css应用于该类

ul

.some-class {
  background: red
}

修改

如果你无法编辑你的标记，这是你的最终标记，那么你可以使用<ul> <li class="level1 some-class">Link1</li> <li class="level1">Link2 <ul> <li>Link2</li> </ul> </li> </ul>或:first-child这样的东西

:first-of-type

.level1:first-child {
  background: red
}