如何从ul中选择第一级子元素(li)

Question

给定以下结构，我想从列表（ul）中选择第一级子元素（li），但不包括嵌套的列表。

ul.list > li {
  background-color: red;
}

<ul id="list" class="list">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

^(JSFiddle)

但是，这也选择了div内部的项目（li）。

我只想使用一个css规则选择子级别（li）的第一层。如何实现？

- Marco

---

给ul添加一个id并将其用作选择器#myUlId>li，或者将父级的ul添加到选择器中body>ul>li。 - G-Cyrillus

为什么不给你的第一个 ul 添加一个类，然后使用 .class li？ - fnune

这是因为所有内容确实都被包含在第一层的lis中。 - Aziz

我认为有些人忽略了这一点，因此当您将某些内容应用于第一级列表时，您实际上会影响到所有内容。您对HTML结构有控制权吗？为什么不只是使用UL父元素而不是LI父元素来包装第二级元素呢？ - Aziz

另外一件事是，你已经设置了背景颜色或者ul.list > li，内部的<h1></h1><div><ul>...</ul></div>是外层最顶层列表中的一个列表项，因此它的背景颜色被设置了，因为它是外部li的整个子树。 - Stephen P

Answer 1

CSS没有选择器可以让你指定所有/没有祖先元素必须匹配某些标准（即不是列表），这需要使用XPath。但是，你可以做以下操作：

ul > li {
  // top level list item styles here
}

li ul > li {
  all: initial;
  // nested item styles here
}

查看MDN all以获取有关重置样式的文档。您还可以选择性地取消设置特定属性。

- the8472

---

all:initial; 是什么作用？ - Aziz

请注意，这在Internet Explorer中不受支持。 - user4639281

unset和revert看起来也很酷，但是当然有人也不支持它们。 - Stephen P

Answer 2

CSS

ul li div ul li { 
  /* Your styles here to override parent (if they are over 70% the same) */ 
}

- Dirk Jan

---

虽然这个答案是正确的，但你真的应该包含一个更好的解释。 - user4639281

Answer 3

你需要识别你的第一个ul标签：

<ul class="my-list">
   <li></li>
   <li></li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li></li>
            <li></li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

然后使用 ul.my-list>li 进行选择。

- Yukulélé

---

在评论中，我们大多谈论了Id，:) - G-Cyrillus

尝试添加类和ID但并没有成功，无论如何都可以选择第二级项目（li）。我已经添加了一个jsfiddle以加以说明。 - Marco

这实际上不起作用，您仍然需要重置嵌套列表。 - user4639281

@TinyGiant，它确实有效，https://jsfiddle.net/ygoh1cee/3/ 你是否意识到没有背景的子元素将显示父元素的背景 ;) - G-Cyrillus

@GCyrillus 是的，所以您仍然需要重置子元素，因为其父元素将具有背景颜色，并且对于继承属性（如字体颜色），您当然仍然需要重置子元素。正如我之前所说，这对于op正在寻找的内容不起作用。 - user4639281

@TinyGiant 这是一种观点 :)，将那些li下移：https://jsfiddle.net/ygoh1cee/4/，然后给body一个bgcolor呢？同样的事情也会发生在那些li上，它们将显示body的背景颜色，只是因为它们**没有设置背景**。这只是基本的CSS :)，这就是为什么我说它有效;)。绝对定位也可以展示它 https://jsfiddle.net/ygoh1cee/5/。 - G-Cyrillus

Answer 4

你可以给包含二级内容的 <li> 添加一个类，然后使用 :not 伪类将它们从主 CSS 查询中排除。

ul.list > li:not(.level2) {
  background-color: red;
}

<ul class="list">
   <li>first level</li>
   <li>first level</li>
   
   <li class="level2"> first level with nested content
      <h1>some title</h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   
   <li>first level</li>
</ul>

- Aziz

Answer 5

你已经有的东西是有效的，你只需要样式化内部的 li，因为它们默认的背景是透明的。

注意，一些属性默认情况下会被继承，并且会被内部的 li 捕获，需要显式设置，比如字体颜色。

ul.list > li li {
  background-color: black;
}

ul.list > li {
  background-color: red;
  color: blue;
}


ul.list2 > li li {
  background-color: black;
  color: yellow;
}

ul.list2 > li {
  background-color: red;
  color: blue;
}

<div>Sample 1</div>

<ul id="list" class="list">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

<hr>
<div>Sample 2</div>

<ul id="list2" class="list2">
   <li>first level</li>
   <li>first level</li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

- Asons

Answer 6

在你的情况下，问题出在background-color上，颜色仅应用于.list>li，但子元素显示父元素的背景。

为了分离颜色，你需要添加元素（例如div或span）。

.list>li>span{
  background-color: red;
}

<ul id="list" class="list">
   <li><span>first level</span></li>
   <li><span>first level</span></li>
   <li>
      <h1></h1>       
      <div>
         <ul>
            <li>second level</li>
            <li>second level</li>
         </ul>
      </div>
   </li>
   <li></li>
</ul>

- Yukulélé