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>