内容发布更新时间 : 2024/5/2 20:43:44星期一 下面是文章的全部内容请认真阅读。

30个最常用css选择器解析

作者：iiduce 文章来源：css9.net 点击数：835 更新时间：2011-7-31 你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。

1.

以下是代码片段： * {

margin: 0; padding: 0; }

星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

以下是代码片段： #container * {

border: 1px solid black; }

上面的代码中会应用于id为container元素的所有子元素中。

除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗

浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 2. #X

以下是代码片段： #container { width: 960px; margin: auto; }

井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera

3. .X

以下是代码片段： .error { color: red; }

这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 4. X Y

以下是代码片段： li a {

text-decoration: none; }

这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y，要留意的点是，这种方式的选择器将选取其下所有匹配的子元素，无视层级，所以有的情况是不宜使用的，比如上述的代码去掉li下的所有a的下划线，但li里面还有个ul，我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用，就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 5. X

以下是代码片段： a { color: red; } ul { margin-left: 0; }

标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 6. X:visited和X:link

以下是代码片段： a:link { color: red; } a:visted { color: purple; }

使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 7. X+Y

以下是代码片段： ul + p { color: red; }

相邻选择器，上述代码中就会匹配在ul后面的第一个p，将段落内的文字颜色设置为红色。(只匹配第一个元素)

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 8. X>Y

以下是代码片段： div#container > ul { border: 1px solid black; }

子选择器。与后代选择器X Y不同的是，子选择器只对X下的直接子级Y起作用。在上面的css和html例子中，div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器，可惜IE6不支持。

兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera 9. X ~ Y

以下是代码片段： ul ~ p { color: red; }

相邻选择器，与前面提到的X+Y不同的是，X~Y匹配与X相同级别的所有Y元素，而X+Y只匹配第一个。