css 选择器权重计算方式

最新推荐文章于 2024-04-08 11:48:36 发布
最新推荐文章于 2024-04-08 11:48:36 发布
阅读量91 收藏
点赞数
分类专栏： CSS 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/php_martin/article/details/125867848
版权

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

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

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

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

小码哥・Martin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS选择器的权重计算
qq_41988669的博客
04-21 291
css选择器的权重计算
CSS 选择器权重计算规则
高先生的猫
06-12 409
一、选择器类型 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 130
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 258
一、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选择器权重计算及优先级
04-16
以下是关于CSS选择器权重计算及优先级的详细解释： 首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...
CSS中选择器的权重值的计算
12-14
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。 接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....
对CSS选择器权重的认识(亲测)
09-22
CSS选择器权重，又称CSS特异性，是CSS中用于判定不同选择器匹配规则权重的标准。当多个规则应用于同一个HTML元素时，浏览器将根据权重来决定最终哪些规则生效。下面是对CSS选择器权重的详细介绍，以帮助开发者更好地...
CSS选择器的权重与优先规则分享
09-24
总之，掌握CSS选择器的权重和优先规则对于编写高效且可维护的样式表至关重要。这不仅可以帮助开发者精确控制页面的样式，也能在解决样式问题时提供清晰的思路。在实践中不断练习和应用这些规则，将成为优化网页设计...
css选择器权重及其计算规则
想搞全栈的前端
04-23 1918
css选择器 文章目录css选择器选择器类型css选择器权重值权重计算方法案例 选择器类型 ID　　#id class　　.class 标签　　p 通用　　* 属性　　[type=“text”] 伪类　　：hover 伪元素　　::first-line 子选择器、相邻选择器 css选择器权重值 选择器 权重 !important 权重 !...
CSS选择器及权重计算
噢咿呀的博客
04-11 284
文章目录一、 常用的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权重计算方法
最新发布
hawk2014bj的博客
04-08 534
CSS 的语法有多种书写方式，元素、类、ID、行内，对于一个大型网站来说，如果CSS 不能通过命名规范和模块化的方式进行有序管理的话，后期维护是非常耗时和困难的，一个效果的改动可能会导致很多 CSS 的变更。如果这两个文件都引入到一个 HTML 中，并且 style2.css 在 style1.css 之后加载，则 p 将显示为蓝色，因为来自 style2.css 的 p 选择器由于顺序将优先于 style1.css，并且这两个选择器具有相同权重。2.权重计算：CSS 通过 4 位二进制来计算权重。
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 2878
原文地址：http://www.jianghuihui.vip/a/jishuwenzhang/HTML_CSS/20180109/34.html CSS有两大特性，继承性和层叠性  层叠性指的是：权重相同的情况下，后写的覆盖前面的样式。 由此可见，层叠性和选择器的权重有很大关系，今天就着重说一下选择器的权重  选择器有两大类： 基础选择器：id选择器，类选择器，
css样式权重计算规则,CSS 选择器权重计算规则详解
weixin_31289551的博客
08-04 999
CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式ID>class>元素一、样式类型1、行间我是行间CSS样式。2、内联h1{font-size:20px;color:#123;}3、外部二、选择器类型ID　　#idclass　　.class标签　　p通用　　*属性　　[type="text"]伪类　　：hover伪元素　　::first-line子选择器、相邻选...
CSS选择器之权重计算公式
weixin_43343144的博客
03-10 306
CSS选择器权重大小排列（256进制） !important 无穷大 行间样式style 1000 #id 100 .class|属性|伪类 10 标签|伪元素 1 通配符 0 ...
【CSS】哪些样式属性可以继承
李留白
03-21 6775
不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-brea
css选择器权重计算
08-23
CSS选择器的权重计算是通过CSS Specificity（特殊性）来确定的。在计算权重时，可以按照以下规则进行计算： 1. 选择器的特殊性由选择器本身的组成部分决定，包括元素选择器、类选择器、id选择器和内联样式。通常来说...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小码哥・Martin

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

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

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

打赏作者

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

抵扣说明：

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

余额充值