css教程

如何正确的使用css选择器

精准像素 2020-09-29 人阅读

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

相关推荐
  • CSS语法
  • CSS * 选择器

    在CSS中选择器中“*”,代表选择全部元素,我们通常用它来处理全部重置样式使用,其他地方很少使用了。语法语义选择全部元素,也可以选择另一个元素内的所有元素兼容性兼容所有浏览器语法代码示例*{padding:0px;margin:0px;}div *{background-color:yellow;...

    css教程 18 9个月前
  • CSS文字超出省略号显示

    帝国CMS标题超出省略号显示可以用:<?=esub($bqr[title],32,'...')?> 但有的地方却不是标题,但也想实现文章超出省略号显示。这里给大家介绍的是利用CSS来达到效果。 HTM...

    css教程 273 7年前
  • CSS字间距样式语法教程

    做网站后,为了外观美观,我们可以通过CSS控制字间距。就是使用CSS的letter-spacing属性来控制。CSS写法:letter-spacing:10px;(后面字数是二字之间的间距值)举例:<style>p{letter-spacing:10px;}</style><p>段落文字段落文字段落文字</p>...

    css教程 124 2年前