仅当特定“ul”的孩子时，CSS才会生效“li”答案

【问题标题】：CSS to effect "li" only if a child of a specific "ul"仅当特定“ul”的孩子时，CSS才会生效“li”
【发布时间】：2011-09-01 04:07:06
【问题描述】：

我有一个无序列表：

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

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

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

【问题讨论】：

标签： html css css-selectors html-lists

【解决方案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 非常严格。各有各的..

【讨论】：

【解决方案2】：

此选择器完全符合您的要求：

ul#vertical_menu > li

如果您的标记总是在该li 下具有一层li 元素，和/或只有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 的结构。

【讨论】：

ul 标签名是否超标？如果有效，则 id 无论如何只能引用那个元素
@beardtwizzle：在 99.99% 的情况下，它有点多。无论如何，我已经详细说明了我的答案。

【解决方案3】：

试试这个：

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

值得注意的是，使用 > 选择器在旧版本的 Internet Explorer（我相信是 IE6）中不起作用，所以如果您也希望支持它，

ul#vertical_menu li

也可以（但它会将边框应用于#vertical_menu 下的每个列表项，即使它是子菜单。

【讨论】：

【解决方案4】：

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

应该可以，但是 IE6 需要

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

【讨论】：

【解决方案5】：

只做

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

记得使用 ul，因为它会使 css 的特性更加清晰，并且它只会对 ul 下的 li 项设置样式。希望它对你有用。

【讨论】：

【解决方案6】：

两个答案都是正确的。虽然ul#vertical_menu li 定位来自ul#vertical_menu 的所有lis，但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>

【讨论】：