CSS选择器优先级以及效率排名以及如何提高选择器效率来提升web前端性能

本文探讨了CSS选择器的优先级排序,包括!important、行内样式、id、类、标签等,并强调了优先级在性能优化中的重要性。建议遵循避免在id和class前加标签名、减少层级、使用类名代替层级、优先使用具体类别等原则,以提高选择器效率,从而提升web前端性能。

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

CSS 三大特性: 继承/优先级/叠层(后者会覆盖前者)

优先级排序:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认

  1. id选择器(#myid)
  2. 类选择器(.myclassname)
  3. 标签选择器(div,h1,p)
  4. 相邻选择器(h1+p)
  5. 子选择器(ul < li)
  6. 后代选择器(li a)
  7. 通配符选择器(*)
  8. 属性选择器(a[rel="external"])
  9. 伪类选择器(a:hover,li:nth-child)
9种选择器效率从高到低排,其中id选择器的效率最高,伪类选择器的效率最低,注意每个选择器都是有自己的效率的

注意是两种个不同的排名

eg:
p{
	color:red !important;
}
<p style="color:blue"></p>

所以会显示为red。


如何写出高效的css样式,高效就是让浏览器查找更少的标签来确定匹配元素,这样对web前端性能的优化有着极大的作用,此处承接上文

1.不要在id选择器前面加上标签名 :因为id是唯一的

2.不要在class选择器前面加上标签名:有必要再加,没必要就不加

3.尽量减少层级关系

4.尽量用类名代替层级关系

5.尽可能的使用具体的类别

注意浏览器对CSS选择器的解析是从右往左的,所以选择器的最右边的,又被称作关键选择器,它对选择器的效率起到关键作用,只要把握一点,越具体的选择器,越高效



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值