當前位置：
首頁 >
【CSS】选择器优先级
發布時間：2025/5/22
60
豆豆
生活随笔
收集整理的這篇文章主要介紹了
【CSS】选择器优先级
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS的選擇器優先級的權重
在 Selectors Level 3 規范中，一個選擇器的優先級（權重）由依次串聯的a、b、c三個標記來計算
a: ID選擇器 如#header
b: class選擇器如.header 屬性選擇器如[title] 偽類如:link
c: 標簽選擇器如h1 偽元素選擇器如::after
注意：偽類:not不參與優先級的計算
一些例子
只要一個選擇器的 a>0，b=0，即使另外一個選擇的a=0, b=161，那么前者的權重依然更大。
a:link{color: red; /* 優先級:a=0,b=1,c=1 */ }.test{color: yellow; /* 優先級:a=0,b=1,c=0 */ }他們的權重（優先級）b是相等的，但是c標記中，前者大于后者，所以最終「a:link」生效顯示為紅色。
:not() 不參與優先級的計算 但()里面的選擇器要計算在內
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(.outer) p {color: red;}.outer .inner p {color: orange;}</style> </head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div> </body></html>這個inner會顯示orange 因為兩個優先級相同，下面的會覆蓋上面的
<!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>CSS Selectors Level</title><style type="text/css">.inner:not(#outer) p {color: red;}.outer .inner p {color: orange;}</style> </head><body><div class="outer"><p>outer</p><div class="inner"><p>inner</p></div></div> </body></html>而這個例子會顯示藍色，上面的:not()內的id選擇器也要計算在內
參考鏈接：
1.知乎的討論：http://www.zhihu.com/question/21777264
2.某博客：http://www.clanfei.com/2013/11/1731.html
轉載于:https://www.cnblogs.com/lijie33402/p/4595418.html
總結
以上是生活随笔為你收集整理的【CSS】选择器优先级的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言及程序设计进阶例程-32 位运算及
- 下一篇： CSS3盒子阴影box-shadow