Question

我有一个无序列表：

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

现在，我需要在“列表项”li元素中添加边框，前提是它是ID为ul的{{1}}的子项。

关于如何做到这一点的任何想法？

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类型的直接子元素。您在此处列出的任何样式都将直接应用于li元素。

如果您需要支持IE6，子选择器>将成为问题。解决此问题的方法是将样式应用于单个级li，并在进一步嵌套的li上“重置”它，例如：

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

这将为vertical_menu中的第一级列表项添加边框，并将从任何其他嵌套项中删除边框。再次没有必要考虑现代浏览器 - 取决于要求。

在HTML标记中，元素ID应该是唯一的，因此实际上您也不需要ul选择，只需使用#vertical_menu > li或#vertical_menu li。在选择器中包含ul非常严格。对他自己来说......

Answer 2

此选择器完全转换为您所要求的内容：

ul#vertical_menu > li

如果您的标记总是在li下有一级ul个元素，和/或只有ID才会被分配到ul而不是其他一些元素的类型（它应该是，为了站点一致性），还有许多其他方法来选择相同的元素，例如：

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;
}

值得注意的是使用＆gt;选择器在旧版本的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定位li的所有ul#vertical_menu，但ul#vertical_menu > li仅定位第一行 li后代。

例如，仅使用最后一个选择器{} {}} id=one将成为目标：

li

CSS只有在特定“ul”的孩子时才能生成“li”

6 个答案: