CSS高级选择器的详解

        CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。

避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。

CSS的优先级

在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题

当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。

那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

第一个数字(a)通常就是0，除非在标签上使用style属性；

第二个数字(b)是该选择器上的id的数量的总和；

第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；

第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；

通用选择器(*)是0优先级；

如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

让我们看几个例子，这样或许比较容易理解些：

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0, 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解优先级是如何工作的是很重要的，但是一些工具比如Firebug，在我们审查指定元素的时候，按照选择器的优先级列出所有的css选择器对让我们知道在指定元素上哪个选择器是有效的是很有用的。

以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。

示例代码：

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

总结：

除了first-child选择器兼容IE7+以上外，其他选择器均需要IE9以上浏览器才能兼容。

Atas ialah kandungan terperinci CSS高级选择器的详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!