css的选择器效率分析

本文深入探讨了CSS选择器的原理与应用,包括基本选择器、多元素组合选择器、属性选择器、伪类与伪元素选择器,并强调了选择器的优先级与效率优化。通过实例分析,揭示了如何通过选择器的细节调整来提升CSS渲染性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

在这里,我们来总结一下css的选择器:

一、基本选择器(标签选择器、通用选择器、类和ID选择器)

选择器描述CSS版本
E标签选择器,匹配所有使用E标签的元素
*通用元素选择器,匹配任何元素
.infoclass选择器,匹配所有class属性中包含info的元素
#footerid选择器,匹配所有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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值