CSS 样式的优先级(权重)

最新推荐文章于 2025-07-15 11:03:49 发布
最新推荐文章于 2025-07-15 11:03:49 发布
阅读量2.3k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79510513
本文详细解释了CSS中不同选择器的权重计算方法，包括默认样式、标签选择器、类选择器、ID选择器、行内样式及!important声明的权重，并通过实例说明了权重叠加的原理及相同权重下后定义覆盖前定义的规则。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



默认样式<标签选择器<类选择器<id选择器<行内样式<!important
      0                1                10            100         1000      1000以上
继承的权重为0  (字体的css会继承自父类标签元素)
权重会叠加     (div.box  权重:1+10=11)  (div #box  权重:1+100=101) 
相同权重的选择器，后边的代码会覆盖前面的



前端新手必看：掌握CSS样式优先级和!important，让你的样式不再冲突！（CSS优先级和!important的用法）
XiaoqiangClub的博客
08-16 481
前端新手必看：掌握CSS样式优先级和!important，让你的样式不再冲突！（CSS优先级和!important的用法）
【前端基础系列】CSS篇-选择器的优先级
Web面试那些事儿的博客
01-02 1631
在前端面试中，经常会遇到CSS选择器的问题三连：说一下CSS的选择器有哪些优先级是怎样的权重计算方式我们在上一篇 【前端基础系列】CSS篇-常用选择器介绍[1] 中已经对问题1进行了详细的解答，今天就来给大家介绍选择器的优先级和权重计算方式。
CSS选择器及优先级
weixin_30455023的博客
08-14 133
转自CSS优先级的计算公式：http://wyz.67ge.com/css-selector-priority/通常我们可以将CSS的优先级由高到低分为六组： 无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。 第二高位的优先属性是在h...
前端学习6：CSS选择器优先级
最新发布
sleeplover_soda的博客
07-15 315
header属性选择器.button:hover伪元素div::before[行内样式] [ID] [类] [元素]!important0注意： 避免过度依赖高优先级选择器（如内联样式或!important），以保持代码的可维护性。
CSS优先级
cychai的专栏
07-21 3532
重谈CSS优先级
《前端》样式冲突，怎么解决--2020年3月30日
BelleDiao的博客
03-30 1575
有时候我引用了bootstrap样式，自己也定义了 样式。但是我看后台应用的是bootstrap包装好的样式。 （很多时候，其实是我愚蠢的总把id选择器，用了“.”，其实应该用“#”） 还有的时候，element.style的样式也阻挡了我自定义的样式。 首先，了解优先级问题。 通常可以将css的优先级由高到低分为六组： 1、第一优先级：无条件优先的属性只需要在属性后面使用！impor...
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
权重和层叠规则决定了CSS样式优先级
12-13
首先，给大家看一篇关于CSS优先级的示例 复制代码代码如下: <span xss=removed><html> <head> <style type=”text/css”> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...
css样式优先级比较实例
01-31
本实例将深入探讨CSS样式的优先级比较，帮助你更好地理解和控制页面的视觉呈现。 首先，我们需要了解CSS选择器的权重计算规则。CSS选择器的权重分为四类：内联样式、ID选择器、类选择器/属性选择器/伪类、以及元素...
强化 CSS 样式优先级的多种方法
m0_75276704的博客
02-12 1201
在 CSS 中，优先级的计算主要依赖于选择器的权重。权重越高，优先级越高。CSS 选择器的权重计算规则权重的计算是累加的。例如：/* 权重 = 1 (div) + 10 (.box) + 100 (#id) = 111 */
css--样式的权重
MondayCui的博客
09-15 673
样式的冲突 - 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定 选择器的权重 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0
CSS样式优先级（权值）
qq_32814941的博客
04-13 1056
CSS权值优先级 标签的权值为1； 类选择符的权值为10； ID选择符的权值为100； 还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。 p{color:red;} /*一个标签，权值为1*/ p span{color:green;} /*两个标签，权值为1+1=2*/ .warning{color:white;} /*一个类选择符，权值为10*/
CSS 选择器的优先级
sinat_38021004的博客
02-17 4144
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。 !important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性 选择器越具体，其优先级越高 // HTML <div id="test"> <span>Text</span> </div> // CSS div#test s..
css优先级
weixin_39557219的博客
08-04 522
通常我们可以将CSS的优先级由高到低分为六组： 　　1、无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。 　　2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。 　　3、第三级优先的属性是由
为您解读CSS优先级
华子的博客
01-23 586
在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过 程中我们经常需要用到。其次：我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作
CSS 优先级
u011848617的专栏
03-03 508
优先级顺序（由高到低） !important 内联样式 ID选择器 类选择器，属性选择器，伪类 标签选择器，伪元素 通配选择符，关系选择符，否定伪类 举例如下： id 选择器：#my-id 类选择器： .my-class 属性选择器： [type=”button”] 伪类选择器： :hover, :link 标签选...
CSS样式优先级规则实例解析
在本实例中，我们将通过不同的场景来比较CSS样式优先级，以帮助大家更好地理解和掌握CSS的层叠和继承机制。 首先，CSS样式的优先级主要取决于以下几个因素： 1. **重要性（!important）**：当一个样式声明被标记为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值