看这一篇就够了,css选择器知识汇总

《看这一篇就够了,css选择器知识汇总》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、看这⼀篇就够了,css选择器知识汇总对⼤多技术⼈员来说都⽐较熟悉CSS选择器，举⼀例⼦来说，假设给⼀个p标签增加⼀个类（class），可是执⾏后该class中的有些属性并没有起作⽤。通过Firebug查看，发现没有起作⽤的属性被覆盖了，这个时候突然意识到了CSS选择器的优先级问题。严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。⽽所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应⽤。⽽在标签内写⼊style=""的⽅式，应该是CSS的⼀种引⼊⽅式，⽽不是选择器，因为根本就没有⽤到选择器。⽽⼀般⼈们将上⾯这⼏种⽅式结合在⼀起，所以就有了5种或6种选择器了。

2、最基本的选择器是元素选择器(⽐如div),ID选择器(⽐如#header)还有类选择器(⽐如.tweet)。⼀些的不常见的选择器包括伪类选择器(:hover)，很多复杂的CSS3和正则选择器，⽐如：first-child，class^=“grid-”。CSS选择器具有⾼效的继承性，引⽤SteveSouders的话，CSS选择器效率从⾼到低的排序如下：1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.⼦选择器（ul>li）6.后代选择器（lia）7.通配符选择器（*）8.属性选择器（a[rel="exter

3、nal"]）9.伪类选择器（a:hover,li:nth-child）纵使ID选择器很快、⾼效，但是它也仅仅如此。从SteveSouders的CSSTest我们可以看出ID选择器和类选择器在速度上的差异很⼩很⼩。在Windows系统上的Firefox6上，我测得了⼀个简单类选择器的（reflowfigure）重绘速度为10.9ms，⽽ID选择器为12.5ms，所以事实上ID⽐类选择器重绘要慢⼀点点。ID选择器和类选择器在速度上的差异基本上没有关系。在⼀个标签选择器(a)的测试上显⽰，它⽐类或ID选择器的速度慢了很多。在⼀个嵌套很深的后代选择器的测试上，显⽰数据为440左右！从这⾥我们可

4、以看出ID/类选择器和元素/后代选择器中间的差异较⼤，但是相互之间的差异较⼩。选择器的优先级是怎么规定的呢？⼀般⽽⾔，选择器越特殊，它的优先级越⾼。也就是选择器指向的越准确，它的优先级就越⾼。通常我们⽤1表⽰标签名选择器的优先级，⽤10表⽰类选择器的优先级，⽤100标⽰ID选择器的优先级。⽐如上例当中.polarisspan{color:red;}的选择器优先级是10+1也就是11；⽽.polaris的优先级是10；浏览器⾃然会显⽰红⾊的字。理解了这个道理之后下⾯的优先级计算⾃是易如反掌：div.test1.spanvar优先级1+10+10+1span#xxx.songsli优先级1

5、+100+10+1#xxxli优先级10对于什么情况下使⽤什么选择器，⽤不同选择器的原则是：1、准确的选到要控制的标签；2、使⽤最合理优先级的选择器；3、HTML和CSS代码尽量简洁美观。通常：①最常⽤的选择器是类选择器。②li、td、dd等经常⼤量连续出现，并且样式相同或者相类似的标签，我们采⽤类选择器跟标签名选择器结合的后代选择器.xxli/td/dd{}的⽅式选择。③极少的情况下会⽤ID选择器，当然很多前端开发⼈员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在⼀个页⾯⾥不可能有第⼆次。在这⾥不得不提使⽤在标签内引⼊CSS的⽅式来

6、写CSS，即：polaris