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特定属性。

Answer 2

<强> CSS

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

Answer 3

您可以向包含二级内容的<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>

Answer 4

你所做的工作，你只需要设计内部li的样式，因为默认情况下它们的背景是透明的。

但请注意，默认情况下会继承某些属性，并且内部li会选择这些属性，并且需要将其设置为显式，如字体颜色。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 5

你需要确定你的第一个ul：

75425,74743 Tall Tale Trailers Inc
75486,74743 Tall Tale Trailers Inc
75421,74743 Tall Tale Trailers Inc
75473,74743 Tall Tale Trailers Inc
75460,74743 Tall Tale Trailers Inc
75461,74743 Tall Tale Trailers Inc
75470,74743 Tall Tale Trailers Inc
75462,74743 Tall Tale Trailers Inc
75462,74743 Tall Tale Trailers Inc
75446,74743 Tall Tale Trailers Inc

然后使用<ul class="my-list"> <li></li> <li></li> <li> <h1></h1> <div> <ul> <li></li> <li></li> </ul> </div> </li> <li></li> </ul>

选择它

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>

如何从ul中选择第一级儿童（li）

6 个答案: