Question

让我们说a有以下代码：

<nav id="main-navigation">
    <ul>
        <li><a href="#">Link 1 Level 1</a></li>
        <li><a href="#">Link 1 Level 1</a></li>
        <ul>
             <li><a href="#">Link 1 Level 2</a>
        </ul>
    </ul>
</nav>

现在我想将第一个ul的高度设置为100px，将第二个ul设置为300px。

当我尝试

时

nav ul {
     height: 100px
}

第二个ul也会继承此值。

我正在尝试“〜”，“+”，“＆gt;”，小孩等等，但即使有文档也不知道该怎么做。

新的css3选择器是否有一个很好的解释（最好有演示/屏幕）指南？ W3桌对我来说太讨厌了。

感谢!!!

Answer 1

如果您只有2层ul，只需选择ul的后代<ul>并为其指定样式即可。不需要任何特殊的CSS2 / CSS3组合器，因为<ul>不能直接包含<ul>，而且您也不必担心IE。

nav ul {
     height: 100px;
}

nav ul ul {
     height: 300px;
}

Answer 2

要选择元素的直接子元素而不是任何后代，您应该使用>语法。在您的情况下（将第二个ul放入li之后），您需要：

nav > ul {
     height: 100px;
}

nav > ul > li > ul {
     height: 300px;
}

~~额外：在100px项目中包含300px项目并没有多大意义。你为什么要这样？~~

另外一个额外的内容：尝试阅读w3c文档，从长远来看，它可以为您节省一些时间。您不明白的事情可以随时询问。

Answer 3

首先，浏览器对您的兼容性有多重要？你提到的所有那些选择器在各种版本的IE中都存在问题（IE8明显优于IE7，但即使是IE8也缺少很多CSS选择器）

简单的嵌套选择器（即CSS名称之间的空格）将适合您 - 尽管如您所说，设置nav li {height:100px;}为所有LI设置它，您可以使用nav li li {height:300px;}覆盖它按照你想要的方式设置内部。

如果你想使用'正确'的选择器，你想要的是>。

nav>ul>li {
    height:100px;
}

这只会影响外部LI元素，而不影响内部元素。但是正如我所说，它不适用于IE的旧版本（幸运的是它在IE7及以上版本中工作，所以如果你想支持IE6，这只是个问题。）

你说你发现各种选择器很难掌握。我建议你访问Quirksmode。首先，它有一个非常方便的兼容性图表，显示哪些浏览器支持哪些选择器，但它也有很好的示例，说明每个选择器如何工作，这可以帮助您更好地理解它们。

CSS3选择器 - 选择后面的第一个项目或项目

3 个答案: