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

看这⼀篇就够了,css选择器知识汇总 对⼤多技术⼈员来说都⽐较熟悉CSS选择器，举⼀例⼦来说，假设给⼀个p标签增加⼀ 个类 class ），可是执⾏后该class中的有些属性并没有起作⽤。通过Firebug查看，发 现没有起作⽤的属性被覆盖了，这个时候突然意识到了CSS选择器的优先级问题。严 格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。⽽所谓 的后代选择器和群组选择器只不过是对前三种选择器的扩展应⽤。⽽在标签内写⼊ style=的⽅式，应该是CSS的⼀种引⼊⽅式，⽽不是选择器，因为根本就没有⽤到选 择器。⽽⼀般⼈们将上⾯这⼏种⽅式结合在⼀起，所以就有了5种或6种选择器了。 最基本的选择器是元素选择器(⽐如div),ID选择器(⽐如#header)还有类选择器(⽐ 如.tweet) 。⼀些的不常见的选择器包括伪类选择器( hover) ，很多复杂的CSS3和正则选择 器，⽐如：first-child ，class ^= “grid-” 。CSS选择器具有⾼效的继承性，引⽤Steve Souders的 话， CSS选择器效率从⾼到低的排序如下： 1.id选择器 #myid ） 2.类选择器 .myclassname ） 3.标签选择器 div ,h 1,p ） 4 .相邻选择器 h 1+p ） 5.⼦选择器 ul li ） 6.后代选择器 li a ） 7 .通配符选择器 *） 8.属性选择器 a[rel=external] ） 9.伪类选择器 a hover , li nth-child ） 纵使ID选择器很快、⾼效，但是它也仅仅如此。从Steve Souders的CSS Test我们可以 看出ID选择器和类选择器在速度上的差异很⼩很⼩。 在Windows系统上的Firefox 6上，我测得了⼀个简单类选择器的 reflow figure ）重绘 速度为10 .9ms ，⽽ID选择器为12.5ms ，所以事实上ID ⽐类选择器重绘要慢⼀点点。 ID选择器和类选择器在速度上的差异基本上没有关系。 在⼀个标签选择器(a)的测试上显⽰，它⽐类或ID选择器的速度慢了很多。在⼀个嵌套 很深的后代选择器的测试上，显⽰数据为440左右 ！从这⾥我们可以看出ID/类选择器 和 元素/后代选择器中间的差异较⼤，但是相互之间的差异较⼩。 选择器的优先级是怎么规定的呢？ ⼀般⽽⾔，选择器越特殊，它的优先级越⾼。也就是选择器指向的越准确，它的优先 级就越⾼。通常我们⽤1表⽰标签名选择器的优先级，⽤10表⽰类选择器的优先级， ⽤100标⽰ID选择器的优先级。⽐如上例当中 .polaris span {color red;}的选择器优先级 是 10 + 1 也就是11；⽽ .polaris 的优先级是10 ；浏览器⾃然会显⽰红⾊的字。理解了 这个道理之后下⾯的优先级计算⾃是易如反掌： div .test1 .span var 优先级 1+10 +10 +1 span#xxx .songs li 优先级1+100 + 10 + 1 #xxx li 优先级 10 对于什么情况下使⽤什么选择器，⽤不同选择器的原则是： 1、准确的选到要控制的标签； 2、使⽤最合理优先级的选择器； 3、HTML和CSS代码尽量简洁美观。通常： ①最常⽤的选择器是类选择器。 ②li、td、dd等经常⼤量连续出现，并且样式相同或者相类似的标签，我们采⽤类选择 器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的⽅式选择。 ③极少的情况下会⽤ID选择器，当然很多前端开发⼈员喜欢header ，footer ，banner ， conntent设置成ID选择器的，因为相同的样式在⼀个页⾯⾥不可能有第⼆次。 在这⾥不得不提使⽤在标签内引⼊CSS的⽅式来写CSS ，即： div style=color:redpolaris/div 这时候的优先级是最⾼的。我们给它的优先级是1000 ，这种写法不推荐使⽤，特别是 对新⼿来说。这也完全违背了内容和显⽰分离的思想。DIV+CSS的优点也不能再有任 何体现。 怎么提升CSS选择器性能？ 1、避 使⽤通⽤选择器 .content * {color: red; 浏览器匹配⽂档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到⽂档 的根节点。因此其匹配开销是⾮常⼤的，所以应避免使⽤关键选择器是通配选择器的 情况。 2、避 使⽤标签或 class 选择器限制 id 选择器 BAD button#backButton {… B