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这个选择符的元素,就应用样式。