css 选择器权重计算方式

最新推荐文章于 2025-04-12 20:49:08 发布
原创 最新推荐文章于 2025-04-12 20:49:08 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

博客介绍了CSS选择器的优先级，如!important优先级最高，内联样式和外联样式次之，ID选择器高于类选择器等。同一级别后写的会覆盖先写的。还提到CSS选择器定位DOM元素是从右往左解析，可尽早过滤不必要的样式规则和元素。

!important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器

  1. 属性后面加!import会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器（*）
  7. 浏览器自定义或继承

同一级别：后写的会覆盖先写的

css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素

Css选择器权重排序详解+权重计算
weixin_45230574的博客
11-20 1661
最详细的Css权重详解、权重排序以及如何加强权重
CSS选择器的权重计算
qq_41988669的博客
04-21 361
css选择器的权重计算
CSS 选择器权重计算规则
高先生的猫
06-12 526
一、选择器类型 1、ID　　#id 2、class　　.class 3、标签　　p 4、通用　　* 5、属性　　[type="text"] 6、伪类　　：hover 7、伪元素　　::first-line 8、子选择器、相邻选择器 二、权重计算规则 权重值 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为100。 第三等：代表类，伪类和属性选择器，如.content，权值为10。 第四等：代表类型选择器和伪元素选择
css选择器权重的计算规则
总柴的博客
12-18 178
css选择器权重的计算规则 选择器 权重 !important Infinity 行间样式 1000 id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0 举例： #app .div1 > span {/*权重计算：100 + 10 + 1 = 111*/ } .div2 > div > input[tyle="checkbox"] {/*权重计算：10 + 1 + 1 + 10 = 22*/
CSS选择器权重计算规则
weixin_42307739的博客
11-25 379
一、CSS选择器类型包括： 1.ID　　#id 2. class .class 3. 标签 p 4. 通用 * 5. 属性 [type="text"] 6. 伪类 :link 7. 伪元素 ::after 8. 子选择器 相临选择器 二、权重计算规则 1.第一等，代表内联样式规则 如：style=""，权值为：1000； 2.第二等，代表ID选择器 如：#box，权...
CSS中选择器的权重值的计算
12-14
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。 接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....
CSS选择器权重计算及优先级
04-16
以下是关于CSS选择器权重计算及优先级的详细解释： 首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...
对CSS选择器权重的认识(亲测)
09-22
CSS选择器权重，又称CSS特异性，是CSS中用于判定不同选择器匹配规则权重的标准。当多个规则应用于同一个HTML元素时，浏览器将根据权重来决定最终哪些规则生效。下面是对CSS选择器权重的详细介绍，以帮助开发者更好地...
css选择器权重及其计算规则
想搞全栈的前端
04-23 2011
css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID　　#id class　　.class 标签　　p 通用　　* 属性　　[type=“text”] 伪类　　：hover 伪元素　　::first-line 子选择器、相邻选择器 css选择器权重值 选择器 权重 !important 权重 !...
CSS选择器及权重计算
噢咿呀的博客
04-11 425
文章目录一、 常用的CSS选择器1. 元素选择器：标签名{}2. id选择器：#id属性值{}3. 类选择器：.class属性值4. 通配选择器：*{}5. 伪类选择器6. 伪元素选择器二、选择器的权重 一、 常用的CSS选择器 1. 元素选择器：标签名{} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style typ
CSS选择器与权重计算（详细）
weixin_44164982的博客
07-09 1143
在前端三大基础中，html负责结构，css负责样式，js负责行为。css写在head标签里面，容器style标签。先写选择器，然后写大括号，大括号里面是样式。常见的选择器类型有以下几种： 1、标签选择器（无论嵌套多少层都能找到） 就是用标签名来当做选择器。 1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2） 不管这个标签藏的多深，都能够被选择上。 3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。 例如，大多数网站的a标签都设置了去掉了下划线的效..
CSS权重计算方法
hawk2014bj的博客
04-08 751
CSS 的语法有多种书写方式，元素、类、ID、行内，对于一个大型网站来说，如果CSS 不能通过命名规范和模块化的方式进行有序管理的话，后期维护是非常耗时和困难的，一个效果的改动可能会导致很多 CSS 的变更。如果这两个文件都引入到一个 HTML 中，并且 style2.css 在 style1.css 之后加载，则 p 将显示为蓝色，因为来自 style2.css 的 p 选择器由于顺序将优先于 style1.css，并且这两个选择器具有相同权重。2.权重计算：CSS 通过 4 位二进制来计算权重。
CSS篇：CSS选择器详解与权重计算全指南
最新发布
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-12 1373
CSS选择器是前端开发的基石，合理使用选择器不仅能精确控制页面样式，还能提高代码的可维护性。本文将系统介绍CSS选择器的各种类型，并深入解析CSS权重计算规则，帮助开发者避免常见的样式冲突问题。
CSS权重计算
qq_29579625的博客
09-07 1183
类选择器 (.class)、属性选择器 ([attribute]) 和伪类 (:hover, :nth-child(), etc.)：权重为 0010（或简单记为10）。important 声明的样式具有最高优先级，权重可视为 10000，这可以覆盖任何其他权重的样式，但应谨慎使用，因为它会使得样式难以维护。通用选择器 (*)、子选择器 (>)、相邻兄弟选择器 (+)、以及后续兄弟选择器 (~)：权重为 0000，但在实际计算权重时不计入，因为它们不影响权重值。根据权重规则计算1，颜色yellow。
css权重及计算
热门推荐
Amustlang
08-04 2万+
一般而言，大多数前端工程师对css样式优先级的概念仅仅停留在下一面一张图上： 注:&gt;表示优先级的一个高低,|表示优先级一样 !important&gt;行间样式&gt;id&gt;class|属性&gt;标签选择器&gt;通配符 但实际上，css是有一个权重的。且是可也计算的，这篇资料不是唯一介绍css权重的，但觉得应该是最通俗的。如图： 注：图中0，1，10，100并不是一个准...
CSS 选择器权重优先级计算规则
qq_17402947的博客
01-09 2997
原文地址：http://www.jianghuihui.vip/a/jishuwenzhang/HTML_CSS/20180109/34.html CSS有两大特性，继承性和层叠性  层叠性指的是：权重相同的情况下，后写的覆盖前面的样式。 由此可见，层叠性和选择器的权重有很大关系，今天就着重说一下选择器的权重  选择器有两大类： 基础选择器：id选择器，类选择器，
css选择器权重计算
08-23
CSS选择器的权重计算是通过CSS Specificity（特殊性）来确定的。在计算权重时，可以按照以下规则进行计算： 1. 选择器的特殊性由选择器本身的组成部分决定，包括元素选择器、类选择器、id选择器和内联样式。通常来说...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值