CSS Select Non Recursive li's Only答案

【问题标题】：CSS Select Non Recursive li's OnlyCSS Select Non Recursive li's Only
【发布时间】：2023-03-12 13:23:01
【问题描述】：

如何仅设置此示例列表中顶级 li 的样式？

<ul class='upper'>
  <li class="first">dog</li>
   <li>cat</li>
   <li>bird</li>
   <li>mouse</li>
   <li>
     <ul class="lower">
        <li>chow</li>
        <li>nibz</li>
        <li>seed</li>
        <li>cheese</li>
     </ul>
  </li>


ul.upper > li {
  color:red;
}

这是我理解的所有 li 的样式，因为递归 UL 在第一级列表项内。有没有一种简单的方法来设置顶级 li 的样式？也许以某种方式使用“:not”？

编辑：我意识到您可以使用 color:initial 或通过添加另一种颜色（和其他方式）覆盖它下面的样式，但我想知道是否有一种方法可以只选择顶级 li，所以另一种样式不是需要。

【问题讨论】：

只需在该规则后面添加li{ color:initial; }
:not() 绝对不会帮助你，因为它只需要没有组合器的简单选择器。
解决您的编辑：不，因为您的 .lower li 也是您的 .upper li。大多数样式都是继承的。您为父级着色，因此默认情况下子级将被着色。
@Judd Cobler @你的最后一次编辑。实际上需要继承。想象一下，如果您将font-size 设置为您的身体，或者font-family，并且style 没有被继承，那么您必须为each element 手动定义它，color 和其他inheritable props 也是同样的故事

标签： css css-selectors

【解决方案1】：

所以，您的 li 正在从他们的祖先那里继承颜色，所以您需要添加 color:initial 或 color:black 来覆盖它

ul.upper > li {
  color: red;
}
li {
  color: initial;
}

<ul class='upper'>
  <li class="first">dog</li>
  <li>cat</li>
  <li>bird</li>
  <li>mouse</li>
  <li>
    <ul class="lower">
      <li>chow</li>
      <li>nibz</li>
      <li>seed</li>
      <li>cheese</li>
    </ul>
  </li>

【讨论】：

Ninja'd before mine，更完整，更干净......我想我会删除我的并返回这个哈哈

【解决方案2】：

你想要子组合器，">"

.upper > li

【讨论】：

【解决方案3】：

您可以像这样定义深层嵌套的 UL 列表项：

ul > li {
  color:red;
} 

ul ul > li {
  color: #000;
}

因此，这可以在整个页面中起作用，以识别任何顶级列表项与二级列表项，而不管类名称如何。 CSS 中的“ul ul”表示“在另一个 ul 中的 ul”

工作示例：https://jsfiddle.net/2Lyvp2bm/2

（我是新手，如何在我的答案中添加代码 sn-p？）

【讨论】：