css选取器权重优先级-天涯论坛 - Powered by Discuz! Archiver

6hz7vif 发表于 2024-6-30 06:47:19

css选取器权重优先级

总结
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。
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-ed4a36e29a401675f0ca958452b5324f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
如下
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-0950247ddb72a1c42c2c7ed8c463ea43_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
样式重复多写的状况
在css样式表中，同一个CSS样式你写了两次，后面的会覆盖前面的，在研发中基本不会运用。
<div style="color: black; text-align: left; margin-bottom: 10px;">#box {
 bac公斤round-color: green;
 }
 /* 这条生效 */
 #box {
 bac公斤round-color: blue;
 }</div>
区别权重，则权重高的生效
<div style="color: black; text-align: left; margin-bottom: 10px;"><!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></div>
!important提高样式优先级
!important的功效是提高了样式的优先级，倘若加了这句话优先级是最高的，然则不意见运用。
<div style="color: black; text-align: left; margin-bottom: 10px;"><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></div>
两种样式都运用！important
<div style="color: black; text-align: left; margin-bottom: 10px;"><!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>
 
 <div class=box></div>
 </body>
 </html></div>

星☆雨 发表于 2024-8-21 15:32:46

我完全赞同你的观点，思考很有深度。

不锈钢厂家 发表于 2024-9-6 21:54:30

外贸B2B平台有哪些？

qzmjef 发表于 2024-10-10 20:22:17

感谢你的精彩评论，为我的思绪打开了新的窗口。

j8typz 发表于 2024-10-24 16:01:58

你的见解真是独到，让我受益匪浅。

qzmjef 发表于 2024-10-29 09:20:31

顶楼主，说得太好了！

页: [1]

天涯论坛's Archiver

css选取器权重优先级