天涯论坛

 找回密码
 立即注册
搜索
查看: 127|回复: 5

css选取器权重优先级

[复制链接]

2966

主题

144

回帖

9912万

积分

论坛元老

Rank: 8Rank: 8

积分
99129182
发表于 2024-6-30 06:47:19 | 显示全部楼层 |阅读模式

总结

1.常用的选取器权重优先级:!important>id>class>tag

2.!important能够提高样式的优先级,然则意见运用那样这一条简写的样式属性所表率的子属性都会被应用加上!important

3.倘若两条样式都运用!important,则权重值高的优先级更高

4.在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的

5.样式指向同一元素,权重规则生效,权重大的被应用

6.样式指向同一元素,权重规则生效,权重相同期,就近原则生效,后面定义的被应用

7.样式不指向同一元素时,权重规则失效,就近原则生效,离目的元素近期的样式被应用

什么是权重

1.权重决定了你css规则怎么样被浏览器解析直到生效。“css权重关系到你的css规则是怎么样表示的”。

2.当非常多的样式被应用到某一个元素上时,权重是一个决定哪种样式生效,是优先级的过程。

3.每一个选取器都有自己的权重。你的每条css规则,都包括一个权重级别。 这个级别是由于区别选取器加权计算的,经过权重,区别的样式最后功效到你的网页中 。

4.倘若两个选取同期功效到一个元素上,权重高者生效。

权重记忆口诀:从0起始,一个行内样式+1000,一个id选取器+100,一个属性选取器、class伪类+10,一个元素选取器,伪元素+1,通配符+0。

如下

样式重复多写的状况

在css样式表中,同一个CSS样式你写了两次,后面的会覆盖前面的,在研发中基本不会运用

#box { bac公斤round-color: green; } /* 这条生效 */ #box { bac公斤round-color: blue; }

区别权重,则权重高的生效

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>权重高的样式生效</title> <style> /* 权重值:1 */ div{ width: 100px; height: 100px; bac公斤round-color: red; } /* 权重值:10 */ .box2{ width: 100px; height: 100px; bac公斤round-color: yellow; } /* 权重值:100 */ #box{ width: 100px; height: 100px; bac公斤round-color: green; } </style> </head> <body> <div id=box class=box2></div> </body> </html>

!important提高样式优先级

!important的功效提高了样式的优先级,倘若加了这句话优先级是最高的,然则意见运用

<style> div{ bac公斤round: blue !important; } #box{ bac公斤round-color: green; } </style> </head> <body> <div id="box" style="bac公斤round-color: red;width: 100px;height: 100px;"></div> </body>

两种样式都运用!important

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>当两个样式都运用!important时</title> <style> .box{ width: 100px; height: 100px; bac公斤round-color: red !important; } div{ width: 100px; height: 100px; bac公斤round-color: green !important; } </style> </head> <body> <!-- 当两个样式都运用!important时,权重值大的优先级更高 --> <div class=box></div> </body> </html>




上一篇:CSS 选取器及权重
下一篇:零基本教你学前端——68-CSS选取器的权重
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-21 15:32:46 | 显示全部楼层
我完全赞同你的观点,思考很有深度。
回复

使用道具 举报

55

主题

488

回帖

553

积分

高级会员

Rank: 4

积分
553
发表于 2024-9-6 21:54:30 | 显示全部楼层
外贸B2B平台有哪些?
回复

使用道具 举报

3069

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-10-10 20:22:17 | 显示全部楼层
感谢你的精彩评论,为我的思绪打开了新的窗口。
回复

使用道具 举报

3061

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139052
发表于 2024-10-24 16:01:58 | 显示全部楼层
你的见解真是独到,让我受益匪浅。
回复

使用道具 举报

3069

主题

3万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99138952
发表于 2024-10-29 09:20:31 | 显示全部楼层
顶楼主,说得太好了!
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 01:24 , Processed in 0.150285 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.