CSS:选择所有第一代元素( child )，但不选择孙子

Question

给定这个无序列表:

<ul>
  <li>Level One Item One
    <ul>
      <li>Level One Item One</li>
      <li>Level One Item Two</li>
    </ul>
  </li>
  <li>Level One Item Two
    <ul>
      <li>Level Two Item One</li>
      <li>Level Two Item Two</li>
    </ul>
  </li>
</ul>

... 我想将样式应用于所有立即 <li>一个 child <ul> ，而不将该样式应用于嵌套列表项。

我认为这个 CSS 选择器可以解决问题，但它没有效果:

ul>li:not(li>ul>li) {
  border: 1px solid red;
}

这是一个 fiddle :

开个玩笑，这是 fiddle :https://jsfiddle.net/nz5fdnd0/1/

这是期望结果的图片:

理想的解决方案是避免在 HTML 中使用明确的类或 ID 属性。

Answer 1

你可以使用

:not(li) > ul > li {
  border: 1px solid red;
}

这意味着将ul 中的li 作为目标，而li 中不包含(直接)。

所以请记住，如果在一个 li 中添加一个 div 并在其中添加一个 ul li，它将被设置样式。

---

:not(li) > ul > li {
  border: 1px solid red;
}

<ul>
  <li>Level One Item One
    <ul>
      <li>Level One Item One</li>
      <li>Level One Item Two</li>
    </ul>
  </li>
  <li>Level One Item Two
    <ul>
      <li>Level Two Item One</li>
      <li>Level Two Item Two</li>
    </ul>
  </li>
</ul>