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

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>

...我想将样式应用于a的所有直接<li>子节点<ul>,而不将该样式应用于嵌套列表项.

我认为这个CSS选择器会起作用,但它没有效果:

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

这是一个小提琴:

开个玩笑,这里是小提琴:https://jsfiddle.net/nz5fdnd0/1/

以下是所需结果的图片:

所需的解决方案将避免在HTML中使用显式的class或id属性.

Answer 1

你可以用

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

这意味着将目标锁定li在一个ul未包含(直接)的a中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>