html - 仅当特定 "li"的子项时，CSS 才会影响 "ul"

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 类型的直接子元素。您在此处列出的任何样式都将根据需要直接应用于 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 是非常严格的。每个人都有自己的..