CSS 僅在特定“ul”的孩子時才生效“li”

Question

我有一個無序列表：

<ul id="vertical_menu">
    <li>Home</li>
    <li>Subitem 1</li>
    <li>Subitem 2</li>
</ul>

現在，我需要為“列表項” li元素添加邊框，前提是它是ul的子元素，id 為vertical_menu 。

關於如何做到這一點的任何想法？

Answer 1

ul#vertical_menu > li
{
    /* apply li styles here as needed */
    border: 1px solid #000;
}

ul#vertical_menu描述了一個 ID 為“vertical_menu”的ul元素。 > li描述類型為li的直接子元素。 您在此處列出的任何 styles 都將根據需要直接應用於li元素。

如果您需要對 IE6 的支持，則子選擇器>將是一個問題。 解決此問題的一種方法是將樣式應用於單層li ，並在進一步嵌套的li上“重置”它，例如：

ul#vertical_menu li
{
    border: 1px solid #000;
}
ul#vertical_menu li li
{
    border: none;
}

這將為vertical_menu 中的第一級列表項添加邊框，並將從任何進一步的嵌套項中刪除邊框。 再次不必考慮現代瀏覽器 - 取決於要求。

在 HTML 標記中，元素 ID 應該是唯一的，因此實際上您也不需要 select 由ul並且可以簡單地使用#vertical_menu > li或#vertical_menu li 。 在選擇器中包含ul是非常嚴格的。 各有各的..

Answer 2

這個選擇器完全符合您的要求：

ul#vertical_menu > li

如果您的標記總是在該ul下具有一級li元素，和/或僅將 ID 分配給ul而不是某些其他類型的元素（為了站點一致性，它應該是），那么其他一些方法是與 select 相同的元素，例如：

ul#vertical_menu li /* Assumes only one level of <li> */
#vertical_menu > li /* Assumes only this <ul> has the ID */
#vertical_menu li   /* Assumes both of the above */

如果需要 IE6 支持，這些替代方案很有用，因為它不支持>組合符，但它們都以一種或另一種方式依賴於 HTML 的結構。

Answer 3

嘗試這個：

ul#vertical_menu > li{
border:1px;
}

值得注意的是，使用 > 選擇器在舊版本的 Internet Explorer（我相信是 IE6）中不起作用，所以如果你也想支持它，

ul#vertical_menu li

也可以工作（但它會將邊框應用於#vertical_menu 下的每個列表項，即使它是一個子菜單。

Answer 4

只做

ul#vertical_menu li{
 border:1px solid #CCC;

請記住使用 ul，因為它會使 css 的特性更加清晰，並且它只會設置 ul 下的 li 項目的樣式。 希望它對你有用。

Answer 5

#vertical_menu > li { border: 1px solid black; } 

應該可以，但是 IE6 需要

#vertical_menu li { border: 1px solid black; }

Answer 6

兩個答案都是正確的。 雖然ul#vertical_menu li以ul#vertical_menu #vertical_menu 中的所有li為目標，但ul#vertical_menu > li僅針對第一行li后代。

例如，使用最后一個選擇器，只有id=one li將被定位：

<ul id="vertical_menu">
    <li id="one"></li>
    <another-element>
        <li id="two"></li>
    </another-element>
</ul>