css的选择器效率分析

firim 发布于2019-08-28 17:58 / 1820人阅读

摘要：选择器的最后一部分，也就是选择器的最右边在这个例子中就是部分部分被称为关键选择器，它将决定你的选择器的效率如何是高还是低。因为最右边的关键选择器是最具体的，也符合上述的选择器优先级顺序。

赞助我以写出更好的文章

如果您觉得文章对您有帮助，可以逐个点击以下链接，类似于Google ads，不需要您付出任何费用，每天都可以来点一次噢，费用将由广告商承担，give me a cup of coffee?

https://app.codesponsor.io/li...

我们都知道，CSS具有叠加性（同一个元素被多条样式规则指定），继承性（后代元素会继承前辈元素的一些样式和属性）和优先级 （由于CSS的叠加性和继承性，将产生优先级，这指的是哪条样式规则会最终作用于指定的元素，他只遵循一条规则，指定的越具体，优先级越高）

由上可知，选择器指定的越具体，那么他的优先级就越高，

在这里，我们来总结一下css的选择器：

一、基本选择器（标签选择器、通用选择器、类和ID选择器）

选择器	描述	CSS版本
E	标签选择器，匹配所有使用E标签的元素
*	通用元素选择器，匹配任何元素
.info	class选择器，匹配所有class属性中包含info的元素
#footer	id选择器，匹配所有id属性等于footer的元素

二、多元素的组合选择器（标签选择器[群组选择器]、后代选择器、子元素选择器、相邻选择器）

选择器	描述	CSS版本
E，F	多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号隔开
E F	包含选择符，匹配所有被E元素包含的F元素
E>F	子元素选择器，匹配所有E元素的儿子元素F
E+F	毗邻元素选择器，匹配所有紧随E元素之后的同级元素F
E~F	匹配任何E标签之后的同级F标签

三、属性选择器

选择器	描述	CSS版本
E[attribute]	匹配所有具有attribute属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）	2.1
E[attribute=value]	匹配所有attribute属性等于“value”的E元素	2.1
E[attribute~=value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素	2.1
E[attribute^=value]	匹配任何E标签之后的同级F标签	2.1
E[attribute$=value]	匹配所有attribute属性值包含有“value”的E元素	3
E[attribute*=value]	匹配所有attribute属性值是以"value"结束的E元素	3

四、伪类选择器

五、伪元素选择器

选择器	描述	CSS版本
E:first-line	匹配所有E标签内的第一行	2.1
E:first-letter	匹配所有E标签内的第一个字母	2.1
E:before	在E标签之前插入生成的内容	2.1
E:after	在E标签之后插入生成的内容	2.1

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

选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[title]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。

那么如何让关键选择器更有效，性能化更高呢？其实很简单，主要把握一点“越具体的关键选择器，其性能越高”

选择器有一个固有的效率，我们来看Steve Souders给排的一个顺序：

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

上面九种选择器的效率是从高到低排下来的，基中ID选择器的效率是最高，而伪类选择器的效率则是最低的。

我们来对比一下这几个实例，看看谁的效率是最高的：

1.  #myId span

  2.  span #myId

由上面的例子，我们可以知道，下面的效率要比上面的高。因为最右边的关键选择器是最具体的，也符合上述的选择器优先级顺序。

GPU云服务器云服务器 css选择器基础选择器css html的编写器选择 css选择

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

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

从css到页面样式渲染

摘要：对应多种语法规则可以为指定样式。渲染页面绘制到屏幕后，页面结构的改变也有可能导致渲染树重新计算，其中重排和重绘是最耗时的部分。写了这么多class,color,background,display...; 也许有时候会疑惑，怎么就显示在页面上，改变元素的样式。本文简明介绍整个解析，匹配，渲染过程 css 描述 css 是Cascading Style Sheets的简写，是一种样式...

Nekron 2019-08-30 15:43 评论0 收藏0
天天都在使用CSS，那么CSS的原理是什么呢？

摘要：也有的元素被完全无视，比如的元素。对于每个元素，必须在所有中找到符合的并将对应的规则进行合并。这样做是为了减少无效匹配次数，从而匹配快性能更优。识别属性值，创建对象，并将对象存入解释器堆栈。数组中的每一项纪录了这个的，的值，权重层叠规则。作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：show...

lijy91 2019-08-30 15:55 评论0 收藏0
天天都在使用CSS，那么CSS的原理是什么呢？

摘要：也有的元素被完全无视，比如的元素。对于每个元素，必须在所有中找到符合的并将对应的规则进行合并。这样做是为了减少无效匹配次数，从而匹配快性能更优。识别属性值，创建对象，并将对象存入解释器堆栈。数组中的每一项纪录了这个的，的值，权重层叠规则。作为前端，我们每天都在与CSS打交道，那么CSS的原理是什么呢？一、浏览器渲染开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：show...

The question 2019-08-23 14:55 评论0 收藏0
JavaWEB开发05_Bootstrap

摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库基本选择器: ID选择器: #ID名称类选择器: .类名元素选择器: 元素的名称通配符选择器: * 找出页面上...

_Dreams 2019-08-02 11:50 评论0 收藏0
JavaWEB开发05_Bootstrap

摘要：类用于宽度，占据全部视口的容器。通过行在水平方向创建一组列。通过为列设置属性，从而创建列与列之间的间隔。上次课内容:什么JQ : write less do more 写更少的代码,做更多的事情 javascript函数库基本选择器: ID选择器: #ID名称类选择器: .类名元素选择器: 元素的名称通配符选择器: * 找出页面上...

coolpail 2019-08-29 17:06 评论0 收藏0