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

Question

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

例如：html 结构

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

css结构：ul li{width:100%;}

但这也适用于嵌套元素！即“ul li ul li”的宽度也为 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。