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

最新推荐文章于 2024-06-16 17:29:19 发布
最新推荐文章于 2024-06-16 17:29:19 发布
阅读量860 收藏 2
点赞数
分类专栏： Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31751569/article/details/77882139
版权
本文探讨了CSS选择器的优先级排序，包括！important、行内样式、id、类、标签等，并强调了优先级在性能优化中的重要性。建议遵循避免在id和class前加标签名、减少层级、使用类名代替层级、优先使用具体类别等原则，以提高选择器效率，从而提升web前端性能。
摘要由CSDN通过智能技术生成

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

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

  1. id选择器（#myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div,h1,p）
  4. 相邻选择器（h1+p）
  5. 子选择器（ul < li）
  6. 后代选择器（
最低0.47元/天 解锁文章
ilvseyinfu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS > 选择器优先级与效率优化
weixin_34258078的博客
08-07 212
CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇。 各类选择器的优先级 important声明 1,0,0,0 ID选择器 0,1,0,0 类选择器...
选择器优先级_【前端面试】css 选择器和选择器性能优化
weixin_39761647的博客
12-01 104
当 css 选择器有两个以上的标记时，分别有三种形式，一种是用空格隔开，比如下面这个： div h1{ background-color: red; width:100px; height:100px; }对所有父标签为 div 的 h1 实行 css 样式。另一种使用逗号隔开，比如说： ...
CSS【详解】样式优先级（含提升优先级的方法、样式的层叠、数值计算法等）
最新发布
朝阳39的博客
06-16 1774
数值越大，优先级越高，尽量保持较低的优先级，以便使用更高优先级的选择器重置样式0级——通配选择器、选择符和逻辑组合伪类。逻辑组合伪类有:not()、:is()和:where等，这些伪类本身并不影响CSS优先级，影响优先级的是括号里面的选择器。1级——标签选择器2级——类选择器、属性选择器和伪类3级——ID选择器4级——style内联5级——!important!important是顶级优先级，可以重置JavaScript设置的样式，唯一推荐使用的场景就是使JavaScript设置无效。
CSS选择器 & 优先级及计算 & 性能优化
Mirror_r的博客
03-22 703
CSS 选择器 什么是 CSS 选择器？ CSS 选择器是选取需设置样式的元素的模式。 CSS有哪些选择器？ 基本选择器： 通配符选择器*：选择所有元素 或 某个元素下的所有元素。 元素选择器：以文档的元素作为选择器（如 span）。 ID 选择器#id-name。 Class 选择器.class-name。 后代选择器E F：用空格，在 E 的后代中选择所有和 F 匹配的元素，也比较常用。 相邻兄弟选择器E + F：选择紧接在 E 元素后且和 F 匹配的元素。 通用兄弟选择器E ~ F：在 E 后的
css选择器排行
A_1156187151的博客
07-03 115
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 ...
记录一下CSS选择器的效率从高到低的一个排序
etc的专栏
06-26 870
id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul
关于CSS选择器优先级的判断题附结果截图
09-25
理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明： 首先，CSS选择器的优先级由四个部分组成，每个部分对应一个权重值： 1. ID选择器（#id）：每个ID选择器的权重为...
深入理解CSS选择器优先级
09-27
本文将深入探讨CSS选择器优先级，通过八个实例来帮助你更好地理解这个概念。 首先，我们要明确一点，类的覆盖顺序并不取决于它们在HTML中的引用顺序，而是取决于它们在CSS文件中定义的顺序。例如，如果有两个类选择...
css选择器优先级深入理解
12-13
掌握CSS选择器优先级对于精确控制网页样式和解决样式冲突至关重要。在编写CSS时，应尽量避免使用!important，因为它降低了代码的可读性和可维护性。合理运用选择器和优先级，可以使CSS代码更加简洁高效。
彻底弄懂CSS选择器以及优先级
01-08
CSS选择器优先级得关系为： !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。（#id） 权值为100 统计选择符中的CLASS属性...
CSS选择器分类、选择器优先级以及CSS优化原则
永久的景专栏
07-30 1249
1. CSS选择器分类 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
iv+css 布局的一个减肥产品排行榜的页面
12-10
div+css 布局的一个减肥产品排行榜的页面
前端性能优化：CSS 选择器性能
xuexiaodong2009的专栏
08-03 3453
CSS选择器效率：CSS选择器具有高效的继承性，引用Steve Souders的话， CSS选择器效率从高到低的排序如下：ID选择器 比如#header类选择器 比如.promo元素选择器 比如 div兄弟选择器 比如 h2 + p子选择器 比如 li > ul后代选择器 比如 ul a 7. 通用选择器 比如 *属性选择器 比如 type = “text”伪类/伪元素选择器 比如 a:hover
css_选择器进阶/如何简单提高选择器的优先级(权重)/类选择器及其衍生
xuchaoxin1375的博客
01-05 2449
文章目录Table of contents全局选择器类选择器的衍生选择器设计仅在指定(特定)元素类型中才生效的类选择器设计多个类被同时应用才生效的选择器如何简单提高选择器的优先级不轻易使用!important优先考虑的做法 Table of contents 推荐原文Type, class, and ID selectors - Learn web development | MDN (mozilla.org) 类型选择器 全局选择器 类选择器 ID选择器 下一篇 模块目录
提高css选择器优先级以及伪类选择器
bingguang1993的博客
08-05 506
!important 提高到最高 height: 50px !important; 伪类选择器 button:disabbled
选择器优先级
corn78的博客
12-02 430
选择器的优先级 选择器的类型 权值 元素选择器 0,0,0,1 类选择器 0,0,1,0 伪类选择器 0,0,1,0 id选择器 0,1,0,0 内联样式 1,0,0,0 注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先 ！improtant 作用：显示调整样式的优先级 语法：属性名称： 值！improtant 注意： ...
css——选择器 选择器优先级 优先级提升 选择器权重计算 继承性
肖的博客
08-13 4121
1、选择器 :focus——选择具有焦点的输入元素 :first-letter——选择元素的第一个字母 :first-line——选择元素的第一行 :before——在元素之前插入内容 :after——在元素之后插入内容 id选择器：#id{ } 命名时，仅数字、字母、下划线可用，且数字不可开头，标签也不可用于id命名 id选择器不可重复 独一无二 类选择器：.className...
jquery选择器及效率问题
weixin_30677475的博客
08-21 151
jquery选择器及效率问题 $('p2') //选择名字 $('.class') //选择class $('#id') //选择id $('#id li') //所有id=”id”标签内的li标签 $(“#id...
CSS中提升优先级属性!important的用法总结
思维小刀
11-02 992
一、语法 选择器{样式:值!import;} 二、说明 提升指定样式规则的应用优先权，即!important为开发者提供了一个增加样式权重的方法，让浏览器首选执行这个语句。 例如下面这个样式： div{ margin-left:20px!important; margin-left:40px; } 如果是在除了IE6的浏览器中，这些浏览器支持!important属性，也就是说他们会默认让margin-left:20px!important; 这条语句生效，下面的不带!important声明的样式将不会覆
选择器优先级 与 4中引入样式方式
a178796665的博客
04-09 142
　　这里涉及css样式加载顺序、覆盖规则，以及优先级提升问题； 　　1. css样式加载顺序 // a.css .one{ color: red; } // c.css .three{ color: green; } <head> <link href=''./a.css"> <...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值