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

比方说，一个有以下代码：CSS3选择器 - 选择的第一个项目或项目之后

<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应该是300像素。

当我尝试

nav ul { 
    height: 100px 
}

二ul也继承了这个值。

我正在尝试“〜”，“+”，“>”，第一个孩子等，但不知道如何做到这一点，即使有文件。

是否有很好的解释（最好有演示/屏幕）指南新的css3选择器？ W3表对我来说太过于内容。

谢谢！

来源

2010-11-15 fomicz

“>”和“+”实际上是CSS 2.1选择器。 456 Berea街有很好的解释。 http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/和http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ – RussellUresti 2010-11-15 17:04:15

只要选择任何ul即ul的后裔，并给它的风格，如果你只有2层<ul> s。不需要任何特殊的CSS2/CSS3组合器，因为<ul>不能直接包含<ul>，再加上你不必担心IE。

nav ul { 
    height: 100px; 
} 

nav ul ul { 
    height: 300px; 
}

来源

2010-11-15 16:51:51 BoltClock

要选择元素的直接子元素而不是任何后代，应该使用>语法。你的情况（你把第二ul后li内），你需要：

nav > ul { 
    height: 100px; 
} 

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

~~超：它并没有真正意义的有一个100像素的项目里面一个300项。你为什么要这样？~~

另一个额外的问题：尝试阅读w3c文档，从长远来看它会为您节省一些时间。你不明白你总是可以问这个问题。

来源

2010-11-15 16:55:16

nav> ul> ul将不起作用，因为标记将是nav> ul> li> ul。但是nav> ul ul会起作用。 – RussellUresti 2010-11-15 17:00:10

100px/300px只是一个例子。好吧，我会尝试坚持w3文档。非常感谢。 – fomicz 2010-11-15 17:03:41

我更新了答案。谢谢。 – 2010-11-15 17:03:59

首先，浏览器兼容性对您有多重要？你提到的所有选择器在各种版本的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。首先，它有一个非常方便的兼容性图表，显示哪些浏览器支持哪些选择器，但它也有很好的例子说明每个选择器的工作方式，这应该会帮助您更好地理解它们。

来源

2010-11-15 17:07:46 Spudley

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

回答

相关问题