html - 如何从ul中选出第一级children(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)。

我只想使用 ONE css RULE 选择第一级子级 (li)。怎么办？

Answer 1

css 没有允许您指定所有/没有祖先元素必须匹配某些条件(即不是列表)的选择器，您需要 xpath。

但你可以做的是:

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

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

参见 MDN all有关重置样式的文档。也可以选择性的unset具体属性。