Question

如何从此示例列表中仅设置顶级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在第一级列表项中。有没有一种简单的方式来设计只有顶级李的风格呢？也许以某种方式使用“：not”？

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

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

Answer 2

您想要儿童组合器＆＃34;＆gt;＆＃34;

.upper > li

Answer 3

您可以定义深层嵌套的UL列表项，如下所示：

ul > li {
  color:red;
} 

ul ul > li {
  color: #000;
}

因此，无论类名如何，这都可以在整个页面中识别任何顶级列表项与第二级列表项。＆＃34; ul ul＆＃34;在CSS中意味着＆＃34; ul在另一个ul＆＃34;

中

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

（我是新的，如何在我的回答中添加代码段？）

CSS选择Non Recursive li's

3 个答案: