列表样式适用于嵌套列表元素在css

Question

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

为例如：HTML结构

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

CSS结构：UL李{宽度：100％;}

但是这也适用于嵌套元素也！即“ul li ul li”也获得了100％的宽度..我不希望发生这种情况！任何解决方案

Answer 1

当您使用ul li它面向所有li元件来的ul孩子这么逻辑，所有ul下筑巢li得到的影响。如果要定位li元件的仅第一级可以使用

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

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

如果您有任何父包装class或id，请替换body。确保你只是不使用ul > li，因为这样它将再次选择嵌套li以及。

Answer 2

您可以使用>选择器，其中ul > li表示选择其父母为ul的所有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），你可能会得到你不想要这样的符号样式：

• 甲
• 乙