如何從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 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 。 您還可以有選擇地取消設置特定屬性。

Answer 2

CSS

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

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選擇它

Answer 4

您可以向<li>添加一個包含二級內容的類，然后使用:not pseudo-class將它們從主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 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> 

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>