列表樣式適用於嵌套列表元素在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），你可能會得到你不想要這樣的符號樣式：

• 甲
• 乙