css样式优先级机制
生活随笔
收集整理的這篇文章主要介紹了
css样式优先级机制
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
對css選擇器不熟悉的建議先看看w3school
一、權值不同時
| style內聯樣式（標簽內部） | 1000 |
| ID選擇器 | 0100 |
| 類選擇器，屬性選擇器，偽類 | 0010 |
| 元素選擇器，偽元素 | 0001 |
下面我們就可以根據上表的權值來計算和比較優先級
| div span {color:blue} | 1+1=2 |
| div .hot {color:yellow} | 10+1=11 |
| #wrap span {color:black} | 100+1=101 |
| #wrap .hot {color:red} | 100+10=110 |
1、根據上面的權重值計算，我們可以知道最終樣式為color:red。
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>div span {color:blue;}div .hot {color:yellow;}#wrap span {color:black;}#wrap .hot {color:red;}</style> </head> <body><div id="wrap" class="div1"><span class="hot">hhhhhhhhhhhhhhhhh</span></div> </body> </html>運行結果確實為紅色：
注意一下：
雖然理論上優先級是按上面的權值計算，但是那只是基于同級上的比較。（11個元素選擇器級別比不上1個類選擇器，其余同理）
當然，還有比style行間樣式優先級更高的是javascript寫的樣式，即js能修改掉css中的樣式，但有一個是例外，那就是css樣式中加了！important 。
2、還是上面的栗子，首先看一下js修改css樣式：
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>div span {color:blue;}div .hot {color:yellow;}#wrap span {color:black;}#wrap .hot {color:red;}</style><script>window.onload = function () { // 修改span里面字體顏色為粉紅色var oHot = document.getElementsByTagName('span')[0];oHot.style.color = 'pink';}</script> </head> <body><div id="wrap" class="div1"><span class="hot">hhhhhhhhhhhhhhhhh</span></div> </body> </html>運行結果，文字變成了粉紅色：
3、！important具有最高的優先級，當給選擇器中加了！important，js是無法修改的。現在試試給權值最小的div span加上！important
（需要提一下：IE6的渲染引擎不認識！important，解析時會自動忽略）
結果字體是橘色的
4、繼承的樣式權值很小，可以看做0或者接近0
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>div .hot {color: blue;}div.div1 {color:yellow;}</style> </head> <body> <div class="div1"><span class="hot">hhhhhhhhhhhhhhhhh</span> </div> </body> </html>這里結果為藍色
二、權值相同時
一般來說，內聯樣式表（標簽內部）> 內部樣式表（當前文件中）> 外部樣式表（外部文件中）。但是如果外部樣式放在內部樣式后面，那么外部樣式將覆蓋內部樣式。
綜上我們可以用“就近原則”來說明權值相同時，靠近元素的樣式級別優先
.div2在.div1后面，會覆蓋掉前面的樣式。但是注意，這個順序并不是指class里面的先后順序。我們可以看到第四個div依然是藍色
綜上
- 每個選擇器都有權值，權值越大越優先
- 繼承的樣式優先級低于自身指定樣式
- ！important優先級最高
- 權值相同時，靠近元素的樣式優先級高（沒有js參與）
總結
以上是生活随笔為你收集整理的css样式优先级机制的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 计算机网络技术第二版毛吉魁,IDS联动系
- 下一篇： 刷magisk模块后不能开机_刷面具模块