CSS选择器权重/优先级

最新推荐文章于 2022-12-02 17:41:41 发布
最新推荐文章于 2022-12-02 17:41:41 发布
阅读量160 收藏
点赞数
分类专栏： 前端 css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoliangj/article/details/120962415
版权
前端 同时被 2 个专栏收录
33 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

CSS选择器的权重 / 优先级

  • > 1000 ：!important，不建议使用；
  • 1000 ：行内样式，如 style="color:red;"；
  • 0100 ：id 选择器，如 #content；
  • 0010：类 | 属性 | 伪类 选择器，如 .content | [content] | :hover；
  • 0001 ：标签 选择器 | 伪元素，如 h1 | ::after；
  • 0000 ：通配符 | 子 | 相邻 选择器，如 * | > | +
  • 无 ： 继承的样式
律己以严
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CSS笔记】CSS选择器的优先级（权重）
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
08-20 2965
在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。
CSS选择器权重计算与优先级
m0_51734506的博客
12-13 2533
CSS选择器权重计算与优先级 选择器有优先级，可以通过权重来计算优先级。 一：优先级 等级划分： 第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。 第二优先级：在html中给元素标签加style，即内联样式。 第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ } 第四优先级：由class选择器、属性选择器、伪类选择器定义。如.classname{ }会覆盖div{ } 第五优先级
css选择器的优先级
yingzizizizizizzz的专栏
03-23 2021
关于下列CSS选择器：ID选择器、类选择器、伪类选择器、标签名称选择器，排序正确的是： ID选择器>Class选择器=伪类>标签名称选择器 伪类和类选择器的优先级是一样的。 一般来说，选择器的优先级（从上往下依次降低）是： 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。 作为style属性写在元素内的样式 id选择器 类选择器 标签选择器 通配符选
css选择器权重与优先级
weixin_65787685的博客
11-26 1240
一：优先级 第一优先级：css属性+!important 拥有最高优先级 第二优先级： 给标签加style，及内联样式 权值1000 第三优先级： id选择器，#id｛｝ 权值0100 第四优先级：class选择器、属性选择器、伪类选择器 权值0010 第五优先级：元素选择、伪元素选择器 权值0001 第六优先级：通用选择器
css 选择器及优先级和权重
WJXYCWCXY的博客
12-02 782
css选择器，:first-child和:first-of-type的区别，目标跳转，选择器的优先级
CSS选择器的权重与优先级
LuckyMon的博客
03-12 974
作者在网上找了很久，找到的关于CSS选择器的权重的内容都大同小异，其中最核心的就是下图 把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下： 1、第一等：代表内联样式，如: style=””，权值为1000。 2、第二等：代表ID选择器，如：#content，权值为100。 3、第三...
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
css选择器 权重优先级,CSS选择器的权重与优先规则
weixin_28676289的博客
08-03 2017
一般而言，大多数前端工程师对css样式优先级的概念停留在如下所示： 注:>表示优先级的一个高低,|表示优先级一样!important>行间样式>id>class|属性>标签选择器>通配符但实际上，css是有一个权重的。且是可也计算的，我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保...
html选择器优先级如何计算,CSS选择器权重计算与优先级
weixin_35728636的博客
06-05 3741
CSS选择器权重计算与优先级选择器有优先级，可以通过权重来计算优先级。一：优先级等级划分：第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。第二优先级：在html中给元素标签加style，即内联样式。第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }第四优先级：由class选择器、属性选择...
CSS选择器权重计算及优先级
04-16
以下是关于CSS选择器权重计算及优先级的详细解释： 首先，我们要了解CSS选择器的四个等级及其对应权重： 1. **内联样式**（权重1000）：这是最高级别的权重，当直接在HTML元素中使用`style`属性定义样式时，例如`;...
关于CSS选择器优先级的判断题附结果截图
09-25
理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明： 首先，CSS选择器的优先级由四个部分组成，每个部分对应一个权重值： 1. ID选择器（#id）：每个ID选择器的权重为...
彻底弄懂CSS选择器以及优先级
01-08
CSS选择器优先级得关系为： !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。（#id） 权值为100 统计选择符中的CLASS属性...
CSS中选择器的权重值的计算
12-14
3. 外部样式：通过`<link>`标签链接到外部CSS文件中的样式，其权重同样取决于选择器。 接下来，我们来看选择器的权重计算规则： 1. ID选择器，如`#content`，权值为0100。 2. 类选择器、伪类和属性选择器，如`....
CSS设置椭圆边框
piaoliangj的博客
01-18 1万+
1.椭圆边框的设置 首先圆角边框我们应该都会做 border-radius: 数值px; 这样能得到四个角度一样的圆角边框 例如： <div>这是一个div</div> div { width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 20px;
js鼠标滚轮事件
piaoliangj的博客
03-06 8621
21.js鼠标滚轮事件——软设问题总结1.滚轮事件简述2.主要js代码 1.滚轮事件简述 当滚动鼠标滚轮或操作其它类似输入设备时会触发滚轮事件。 2.主要js代码 因标准未定义滚轮事件具体会引发什么样的行为，引发的行为实际上是各浏览器自行定义的。 window.addEventListener("wheel", function(e) { let evt = e || window.event; //考虑兼容性 evt.preventD
给图片加一个黑色半透明的遮盖层
piaoliangj的博客
02-05 7310
12.给图片加一个黑色半透明的遮盖层——软设问题总结12.1 知识点12.1.1 img标签::after和::before失效12.1.2 默认地，::after和::before是行内元素12.2 代码案例12.3 不使用img标签的另一种方法12.3.1 思路如下：12.3.2 代码如下 12.1 知识点 在做这个效果的时候，想必第一想法都是先在img标签放图片然后再在img::before/::after元素设置遮盖层，但是会发现这个方法无法出现遮盖层。 主要原因是： 12.1.1 img标签::a
js定时器的用法，解决多次点击/触发定时器越走越快的问题
piaoliangj的博客
02-22 6156
19.js定时器，以及解释、解决多次点击/触发定时器越走越快——软设问题总结19.1 js定时器19.2 定时器的使用19.3 定时器越走越快的原因19.4 解决定时器“越走越快”的问题 19.1 js定时器 在菜鸟教程中介绍到： js 定时器有以下两个方法： setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() ：在指定的毫秒数后调用函数或计算表达式。 两个方法都有三个
限制input file上传类型只能是图片(附带accept可指定的值，即文件限制类型)
piaoliangj的博客
01-22 4326
6.限制input file上传类型只能是图片——软设问题总结系列6.1限制文件上传类型的属性——`accept`6.2 accept的其他取值 6.1限制文件上传类型的属性——accept 主要代码是设置input的行内属性 accept 及其值 代码如下： <input type="file" accept="image/*"> 点击选择文件后的效果图如下： 6.2 accept的其他取值 *.3gpp audio/3gpp, video/3gpp 3GPP A
前端css选择器的权重优先级
最新发布
06-08
在 CSS 中，选择器的权重（优先级）是用来确定哪个规则将被应用于元素的一种方式。选择器的权重由四个部分组成，分别是： 1. 内联样式：在元素的 style 属性中直接设置的样式，权重为 1000。 2. ID 选择器：通过 # 符号定义的选择器，权重为 100。 3. 类选择器、属性选择器和伪类选择器：通过 .、[ ] 或 : 符号定义的选择器，权重为 10。 4. 元素选择器和伪元素选择器：通过标签名或 :: 符号定义的选择器，权重为 1。 当多个选择器应用于同一个元素时，CSS 根据选择器的权重确定应用哪个规则。如果两个选择器的权重相同，则后面的规则将覆盖前面的规则。常见的选择器权重组合如下： 1. `#id`：权重为 100。 2. `tag`：权重为 1。 3. `.class`：权重为 10。 4. `tag .class`：权重为 11。 5. `tag#id`：权重为 101。 6. `#id.class`：权重为 110。 当多个选择器的权重相同时，可以使用 !important 关键字强制应用某个规则。但是，在实际开发中，应该尽量避免使用 !important，因为它会破坏 CSS 的层叠性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值