如何从ul选择第一级儿童（li） [英] How to select the first level of children (li) from ul

问题描述

给定以下结构，我想从列表（ul）中选择第一级子级（li），而不是嵌套列表。

Given the following structure, I want to select the first level of children (li) from the list (ul), but not the nested list.

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

But that selects also the items (li) inside the div.

我想选择第一级的子级 css RULE 。如何？

I want to select the first level of children (li) using only ONE css RULE. How?

推荐答案

css没有选择器，允许您指定所有/无祖先元素必须匹配某些critieria（即不是一个列表），你需要xpath。

css does not have a selector that would allow you to specify that all/none of the ancestor elements must match certain critieria (i.e. not be a list), you would need xpath for that.

但你可以做的是：

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

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

请参阅 MDN all ，了解有关重置样式的文档。您还可以选择性取消设置特定属性。

See MDN all for documentation on resetting styles. You can also selectively unset specific properties.

这篇关于如何从ul选择第一级儿童（li）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！