列表样式应用于css中的嵌套列表元素

Question

当我将宽度作为100％应用于列表元素时，嵌套列表元素也将获得相同的宽度！我不希望这种情况发生。如何使其不适用于列出的元素。

表示：html结构

<ul>
  <li>        
    <ul>   
      <li></li>
      <li></li>
    </ul>            
  </li>
</ul> 

css结构：ul li {width：100％;}

但这也适用于嵌套元素！即＆＃34; ul li ul li＆＃34;也得到宽度为100％..我不希望这发生！任何解决方案

Answer 1

当您使用ul li时，它会定位li所有ul元素，因此逻辑上，嵌套在li下的所有ul都会受到影响。如果您只想定位第一级li元素，可以使用

body > ul > li {
  width: 100%;
}

上面的选择器选择直接嵌套在li下的ul元素，该元素进一步直接嵌套到body。这样，它就不会选择嵌套的ul元素，因为它不是body元素的直接子元素。

如果您有任何包含body或class的父包装，请

替换id。确保您没有使用ul > li，因为这样它也会再次选择嵌套的li。

Answer 2

您可以使用>选择器ul > li表示选择其父级为的所有li。您可以通过指示其他级别来进一步细化父子关系。

ul > li {
  width: 100%;
  background-color: yellow;
}

ul > ul > li {
  width: 25%;
  background-color: red;
}

<ul>
  <li>A</li>
  <li>B</li>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</ul>

顺便说一句，如果你在列表项（li）中放置一个列表（ul），你可能会得到你不想要的子弹样式：

• A
• 乙
• • 1
  • 2