網站首頁 編程語言 正文
css選擇器優先級問題(選擇器的權重圖)
A.為啥有此問題的產生?
a.眾所周知,css對于同一屬性先進行優先級別的判斷,若比之前渲染的優先級別高,那么就會渲染成這個優先級別較高的。
b.對于單一的選擇器而言,優先級別有固定的順序,按照這個優先級別去設置同一樣式,就不會出現樣式覆蓋,但是如果遇到了中級選擇器(如派生選擇器),該如何判斷優先級別呢?
因此就提出了選擇器權重規則
B.選擇器權重圖如下所示:
選擇器 | 權重 |
---|---|
!important | 無窮大 |
行內樣式(標簽里面寫style) | 1000 |
id選擇器 | 100 |
類選擇器(class) | 10 |
屬性選擇器([屬性名=屬性值]) | 10 |
偽元素 | 10 |
標簽選擇器§ | 1 |
偽類 | 1 |
通配符 | 0 |
C.中級選擇器甚至更復雜的選擇器如何進行權重的計算呢?
1.以下面的源代碼為例
<!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>選擇器權重問題</title>
<style type="text/css">
div > #content span{
color: brown;
font-family: "宋體";
}
div .one span{
color: pink;
font-family: "楷體";
}
</style>
</head>
<body>
<div>
<div class="one" id="content"><span>堅持,不只是為了離夢想更近一步</span></div>
<div></div>
<div></div>
</div>
</body>
</html>
2.分析
選擇器的執行順序是從上往下的
那么div .one span這個選擇器在 div > #content span選擇器之后,為啥不會顯示后者所編寫的css樣式,而是選擇顯示前者的css樣式呢?
我們給div .one span選擇器取名為m,div > #content span選擇器取名為n
那么m的權重=標簽選擇器權重×1+類選擇器權重×1+標簽選擇器×1
? =1+10+1=12
????????n的權重=標簽選擇器權重×1+id選擇器權重×1+標簽選擇器×1
? =1+100+1=102
m的權重<n的權重
因此n的優先級別高,不用管其在css里面的位置,只要寫了,就一定是它優先執行
不會被后面比它優先級小的選擇器修改樣式
總結:復雜的選擇器權重=單個選擇器權重之和
3.運行結果
原文鏈接:https://blog.csdn.net/SSS4362/article/details/125454833
- 上一篇:css中border屬性設置
- 下一篇:初識form表單中的兩種提交方式
相關推薦
- 2022-10-14 cannot find symbol[ERROR] package sun.misc
- 2022-03-07 Android?permission?denied原因歸納和解決辦法_Android
- 2022-02-25 Servlet配置啟動級別loadOnStartup注意事項
- 2022-04-22 Error:Module “./antd/es/badge/style“ does not exis
- 2023-03-20 淺談Redis在秒殺場景的作用_Redis
- 2022-03-22 ASP.NET Core中如何使用Dapper
- 2022-04-09 C#實現計算器精簡版_C#教程
- 2022-08-11 Redis實現主從復制方式(Master&Slave)_Redis
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支