CSS3 选择器 - 选择第一个元素或之后的元素

Question

假设有以下代码:

<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也继承了这个值。

我正在尝试“~”、“+”、“>”、第一个 child 等，但不知道如何去做，即使有文档。

是否有新的 css3 选择器的详细解释(最好带有演示/屏幕)指南？ W3 Table 对我来说太讨厌了。

谢谢!!!

Answer 1

只需选择任何 ul那是 ul 的后代如果你只有两层<ul>，就给它那种风格秒。不需要任何特殊的 CSS2/CSS3 组合器，因为 <ul>不能直接包含 <ul> ，而且您也不必担心 IE。

nav ul {
     height: 100px;
}

nav ul ul {
     height: 300px;
}