天涯论坛

 找回密码
 立即注册
搜索
查看: 86|回复: 2

css 的优先级秩序是什么?

[复制链接]

2963

主题

144

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139411
发表于 2024-6-30 08:28:35 | 显示全部楼层 |阅读模式

按照下面的代码进行验证,先去掉!important,验证三种样式表的优先级,而后再加上!important,验证!important的优先级。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 外边样式表 --> <link rel="stylesheet" href="css/waibu.css"> <!--内部样式表--> <style> div{ width:300px !important; height:300px !important; bac公斤round-color: green !important; } </style> </head> <body> <!-- 行内样式表 --> <!-- style="width:100px;height:100px;bac公斤round-color:red" --> <div ></div> </body> </html>

最后结论:

选取器权重: !important(10000)>行内(1000)>id(100)>类(10)>标签(1)>通配符(0)

仔细内容查看以下文案

diveng:怎样理解CSS样式表权重与优先级1 赞同 · 0 评论文案

倘若你想学习高级选取器的运用例如子代选取器,后代选取,相邻兄弟选取器,群组选取器等等,请查看,

海量案例,清晰易懂,CSS优先级,选取器权重,看上面2篇文案就足够了。





上一篇:HTML引入CSS样式三种办法及优先级
下一篇:CSS 实例系列
回复

使用道具 举报

3069

主题

3万

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99158935
发表于 2024-10-7 18:26:01 | 显示全部楼层
期待你更多的精彩评论,一起交流学习。
回复

使用道具 举报

3047

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109044
发表于 2024-10-22 04:18:18 | 显示全部楼层
你的见解独到,让我受益匪浅,期待更多交流。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-22 19:01 , Processed in 0.117258 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.