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>

...我想将样式应用于<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中未包含（直接）的li。

所以请记住，如果你在里面添加div，那么ul li就可以设置样式。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我找到的一个解决方案是添加一个外部<div>，然后定位该第一个孩子：

div > ul > li {
  border: 1px solid red;
}

<div>
  <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>
</div>

不幸的是，它并没有使用任何花哨的东西：不是选择者，啊，这就是生活。

Answer 3

您也可以使用

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

如果您的父<ul>元素有兄弟姐妹，这将有效。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

ul li {
  border: 1px solid red;
}   
 ul:first-child ul li{
   border: none;
 }