css 选择器权重计算

已于 2022-06-09 15:19:45 修改
阅读量191 收藏
点赞数
分类专栏： css 文章标签： css
于 2020-06-17 20:32:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43294560/article/details/106817764
版权 
权重:
	行内样式		1000
	id选择器   	0100
	class选择器、类相关的属性选择器、伪类（:hover等）  0010
	标签  		0001
	*、组合器（>、+、~） 0000
	继承无权重	null

计算:
权重会根据选择器叠加

	body .x:权重11
	class[name]:权重20   类+类的属性选择器
	body .class[name]:权重21
神奇大叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器权重计算及优先级
04-16
以下是关于CSS选择器权重计算及优先级的详细解释： 首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...
CSS选择器的权重计算
Wendy
02-28 4660
刚好是在做面试题的时候，发现有一个题目时关于CSS选择器的权重计算，当时脑海中只知道：id>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，至于权重的计算其实没有多大的印象，所以就来总结一下，避免以后遇见了还是不太懂。作为前端开发人员，知道CSS选择器的权重还是非常重要的。     在讲解计算规则之前，先来大概再了解下具体的CSS选择器有哪些，才可以更方便的知道权
CSS选择器与权重计算（详细）
weixin_44164982的博客
07-09 959
在前端三大基础中，html负责结构，css负责样式，js负责行为。css写在head标签里面，容器style标签。先写选择器，然后写大括号，大括号里面是样式。常见的选择器类型有以下几种： 1、标签选择器（无论嵌套多少层都能找到） 就是用标签名来当做选择器。 1） 所有标签都能够当做选择器，比如body、h1、dl、ul、span等等 2） 不管这个标签藏的多深，都能够被选择上。 3） 选择的是所有的，而不是某一个。所以是共性，而不是特性。 例如，大多数网站的a标签都设置了去掉了下划线的效..
CSS权重计算方法
最新发布
hawk2014bj的博客
04-08 535
CSS 的语法有多种书写方式，元素、类、ID、行内，对于一个大型网站来说，如果CSS 不能通过命名规范和模块化的方式进行有序管理的话，后期维护是非常耗时和困难的，一个效果的改动可能会导致很多 CSS 的变更。如果这两个文件都引入到一个 HTML 中，并且 style2.css 在 style1.css 之后加载，则 p 将显示为蓝色，因为来自 style2.css 的 p 选择器由于顺序将优先于 style1.css，并且这两个选择器具有相同权重。2.权重计算：CSS 通过 4 位二进制来计算权重。
CSS选择器种类和权重计算
xiyang9520的博客
04-17 1124
CSS选择器和权重计算。
CSS中选择器的权重值的计算
12-14
接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`.content`，权值为0010。 3. 类型选择器、伪元素选择器，如`div p`，权值为0001。 4. 通配符...
对CSS选择器权重的认识(亲测)
09-22
CSS选择器权重，又称CSS特异性，是CSS中用于判定不同选择器匹配规则权重的标准。当多个规则应用于同一个HTML元素时，浏览器将根据权重来决定最终哪些规则生效。下面是对CSS选择器权重的详细介绍，以帮助开发者更好地...
CSS选择器的权重与优先规则分享
09-24
总之，掌握CSS选择器的权重和优先规则对于编写高效且可维护的样式表至关重要。这不仅可以帮助开发者精确控制页面的样式，也能在解决样式问题时提供清晰的思路。在实践中不断练习和应用这些规则，将成为优化网页设计...
Css选择器权重排序详解+权重计算
weixin_45230574的博客
11-20 1523
最详细的Css权重详解、权重排序以及如何加强权重
css选择器优先级权重计算规则
m0_46293001的博客
10-25 648
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高 权重大小： 1、内联样式，如: style="..."，权值为1000。 2、ID选择器，如：#content，权值为0100。 3、类，伪类、属性选择器，如.content，权值为0010。 4、标签选择器、伪元素选择器，如div p，权值为0001。 5、通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。 ​6、继承的样式没有权值 计算规则： 1、首先先计算选择器中有多少
css选择器权重计算
weixin_42863585的博客
03-18 119
权重计算 !important > 行间样式 > id>class\属性\伪类 >标签\伪元素> 通配符 css权重 !important 无穷大 行间样式 1000 id选择器 100 class/属性/伪类 10 标签/伪元素 1 通配符 0 注意：即使有11个class，也不会大于id。即同一元素有11个class，一个id，也是id优先。 <!DOCTYPE html> <html> <head>
css权重及计算
热门推荐
Amustlang
08-04 2万+
一般而言，大多数前端工程师对css样式优先级的概念仅仅停留在下一面一张图上： 注:&gt;表示优先级的一个高低,|表示优先级一样 !important&gt;行间样式&gt;id&gt;class|属性&gt;标签选择器&gt;通配符 但实际上，css是有一个权重的。且是可也计算的，这篇资料不是唯一介绍css权重的，但觉得应该是最通俗的。如图： 注：图中0，1，10，100并不是一个准...
css选择器，优先级，权重计算
77今天也学习了的博客
05-12 172
参考 权重计算规则 第零等：!important， 大过了其它任何设置。 第一等：代表内联样式，如: style=””，权值为1000。 第二等：代表ID选择器，如：#content，权值为0100。 第三等：代表类，伪类和属性选择器，如.content，权值为0010。 第四等：代表标签选择器和伪元素选择器，如div p，权值为0001。 第五等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 第六等：继承的样式没有权值。 计算规则： !important 和内联样式style都属
CSS选择器之权重计算公式
weixin_43343144的博客
03-10 308
CSS选择器权重大小排列（256进制） !important 无穷大 行间样式style 1000 #id 100 .class|属性|伪类 10 标签|伪元素 1 通配符 0 ...
CSS 选择器权重计算规则
逸少
10-24 528
其实，CSS有自己的优先级计算公式，而不仅仅是行间>内部>外部样式；ID>class>元素。 一、样式类型 　　1、行间 我的行间CSS样式。   　　2、内联 h1{font-size:12px; color:#000; }  　　3、外部 二、选择器类型 　　1、ID　　#id 　
css权重机制,CSS权重及其计算
weixin_32601635的博客
08-03 3554
CSS权重及其计算：每个选择器都有自己的权重。你的每条css规则，都包含一个权重级别。这个级别是由不同的选择器加权计算的，通过权重，不同的样式最终会作用到你的网页中。如果你不了解CSS权重，写CSS代码的过程中使用各种选择器时，你不知道哪个选择器的优先级高，哪个选择器的优先级低，就只能最原始最粗俗的方式是“死记硬背”，但如果理解了CSS权重后，会事半功倍！！！选择器优先原则：!important ...
CSS选择器的权重问题
zheng_pika的博客
12-21 4385
css选择器的优先级，谁的优先级更高，不仅要看选择器还需要看权重 要学会计算权重才能更好的引用想要的样式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值