如何正确的使用css选择器

css选择符的概念,在之前的新手学习css优先级的开头部分也有提到,是指每一条样式规则中,描述把样式作用到哪些元素的部分,也即{}之前的部分。css选择符将确定后面的属性定义要作用到哪些元素,因此存在一

[时间:07-13]    [浏览:]    [放入收藏夹]    [查看详情]

css选择符的概念,在之前的新手学习css优先级的开头部分也有提到,是指每一条样式规则中,描述把样式作用到哪些元素的部分,也即{}之前的部分。

css选择符将确定后面的属性定义要作用到哪些元素,因此存在一个浏览器根据css选择符来应用样式到对应元素的匹配过程。

更好的css选择符,是让浏览器在样式匹配过程中减少匹配查询次数,以更快的速度完成样式匹配,从而优化前端性能。这其中,也必须参考浏览器的对于样式从右向左的匹配顺序。

css选择符的正确使用方式更特定

更具体的关键选择符

关键选择符是浏览器引擎在样式匹配时最先读取到的部分,因此,如果你在某一条样式规则中使用更特定、具体的选择符,可以帮助减少浏览器的查找匹配次数。

比如说下边这样的选择符:

.content .note span{}

最后一个span是关键选择符,而span这个标签,在网页中使用是非常多的。浏览器从span开始读取选择符,就可能会为因此在样式匹配上做了一些额外工作。

如果你确定只是想为具体处于那一个位置的span元素定义样式,更好的做法是为span命名class,比如命名为span.note_text,然后简单写为:

.note_text{}

使用class选择符

class选择符(类选择符)是最利于性能优化的选择符。相对于class,ID的缺点是只允许定义给一个元素,无法重用。而此外,它在使用上没有任何比class更好的地方。很多时候,你很难确定某一个元素是否是唯一的。另外,使用class来定义样式,而保留ID给javascript,一直是一个较好的实践。如果可以,不使用ID来定义样式。

而相对于class,标签在html中的重复性要更大,因此同样可能让浏览器在样式匹配时做更多的额外工作。如果可以,除CSS样式清零(reset)外,不使用标签选择符(也叫元素选择符)。

缩短选择符序列

继承写法(准确地说,这里指css关系选择符中的包含选择符)是css中很常用的写法。继承写法的初衷是,如果有两个元素,都是同样的标签或有相同的class命名,加入父元素的选择符组成选择符序列,就可以避免在不需要的时候两个元素的样式互相影响。比如.confirm_layer .submit_btn就是指,class名为submit_btn,且有一个class名为confirm_layer的父元素的元素,才应用样式。

但是,避免元素样式相互影响,并不代表可以随意地使用继承选择符。前面提到,浏览器会从右向左读取整个选择符序列,直到读取完毕并匹配完成,或者因不匹配而取消。因此,短的选择符序列更有利于浏览器更快地完成匹配过程。相对的,冗长的选择符序列则认为是低效的,比如:

.header ul li .nav_link{}

建议写为:

.header .nav_link{}

一般来说,不超过3层的继承层级就可以满足实际中的开发要求。因此,应减少不必要的继承层级,使用更短的选择符序列。

此外,较长的选择符序列还有一个问题。有较长选择符的样式规则,css优先级的计算值也较大,因此,如果在以后需要写新的样式来覆盖掉它,就需要写更长的选择符(或者使用ID)以获得更高的css优先级。这对性能和代码可读性都是不利的。

避免链式选择符

链式选择符(Chaining selectors)是对单个元素同时写了多个选择符判定的情况。比如p.name是指class名为name,且标签是p的元素,才应用样式。这些判定组合可以是ID选择符,标签选择符,class选择符的任意组合。

但是,链式选择符是过度定义(over qualified)的,不利于重用,也不利于性能优化。如:

a#author{}

建议写为:

#author{}

这里的a是不必要的。一个ID只对应一个元素,没有必要再强调这个元素的标签是什么(同理,class也不必)。另外有

.content span.arrow{}

建议写为:

.content .arrow{}

这里的span.arrow中的span也是不必要的。一方面,这为浏览器在样式匹配时增加了一项额外工作:检查class名为arrow的元素的标签名是不是span,也因此降低了性能。另一方面,如果去掉了这个限定,.arrow的样式定义,就可以用在更多的元素上,也就有着更好的重用性。否则,就还得告诉别人,使用这个的时候只能用在span标签上。

同理,多个class的链式写法,如

.tips.succuss{}

建议更改命名,写为:

.tips_succuss{}

这样可以帮助浏览器减少额外的样式匹配工作。

此外,IE6还存在一个链式选择符的问题,多个class选择符写在一起时,例如.class1.class2.class3,正常情况是只有同时有这全部的class的元素,才应用样式。但IE6只认最后一个,也就是符合.class3这个选择符的元素,就应用样式。

  本文转载自:精准像素:11px.cn ,感谢作者分享实用知识


标签: