CSS选择器

qpwoeiru96 发布于2019-08-30 15:55 / 877人阅读

摘要：优先级相同，与元素近的选择器生效。使用建议建议说明避免将通用选择器作为通用选择器。避免选择器用标签。避免使用子选择器。后代选择器是开销最最最最大的。

看了一下最近写的css代码,发现基本只用到了id选择器(js里)、后代选择器和类选择器(因为听大牛推荐使用类选择器,然后就开始大篇幅使用。。。)。所以想深入学习一下css选择器和css的效率优化,先记录所学的一部分,以备后续补充。

选择器非官方中文版

w3c官方英文版

选择器效率由高到低:

id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）

在这里，我们需要知道的是浏览器是如何读取选择器的。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。

选择器的最后一部分，也就是选择器的最右边,部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。“越具体的关键选择器，其性能越高”。举个例子： #myId span和span #myId谁的效率更高?答案是后者效率更高,因为后者的关键选择器更具体。

选择器优先级:

行内样式就是这种语法的<标签名 style="属性1;属性2;属性3;属性4">内容。例如这样:

使用规则

规则	说明
行内样式会被!important覆盖。	不推荐使用!important。!important的优先级比行内优先级高,有时候样式一直不生效就可能不知道在哪写了个!important。
优先级不同的选择器作用在同一元素上,优先级高的生效。
优先级相同的选择器在同一元素上，以后出现的为准。	如果一直修改一个样式不生效，可能是被后出现的同名选择器给覆盖了。。。。
选择器越具体,优先级越高。
优先级相同，与元素近的选择器生效。	head里和.css文件里，head里的选择器生效。

注:
!important说明:

如果不使用!important，第二个样式会覆盖第一个，但是由于第一个有!important，所以在字号设置上优先级更高。

使用建议

建议	说明
避免将通用选择器作为通用选择器。	匹配开销大。
避免id选择器用标签和类。
避免class选择器用标签。
用class替换多层标签选择器。	减少css查找。
避免使用子选择器。	后代选择器是开销最最最最大的。
避免正则的属性选择器。
删除没用的样式。	用工具检索是否用到。

结束语:诶,看了一圈发现还是要用类选择器...（捂脸）

GPU云服务器云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117251.html

WEB前端 CSS

摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器标签选择...

darry 2019-04-23 13:34 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

forrest23 2019-08-02 16:16 评论0 收藏0
编写高效的 CSS 选择器 – CSS魔法

摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。有很多人都忘记了，或在简单的说没有意识...

hyuan 2019-08-30 10:50 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

Scott 2019-08-30 14:08 评论0 收藏0
前端面试题-CSS选择器性能优化

摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

XGBCCC 2019-08-01 18:42 评论0 收藏0