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

Question

我有一个无序列表如下:

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

现在,我只需要在"list item" li元素中添加边框,只要它是ul具有id 的子元素vertical_menu.

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

Answer 1

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

ul#vertical_menu描述ulID为"vertical_menu" 的元素.> 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在选择器中是非常严格的.对他自己来说......