前端工程師經常和選擇器權重打交道，但是部分人還是一知半解，下面咱們一起學習一下吧。
類選擇器：.active{}
標籤選擇器：div{}
屬性選擇器：img[alt]{}
通用選擇器：*{}
選擇器權重:這裡的「權」，和是數學中加權平均數的「權」乙個意思。當同時多個css選擇器語句的目標是同乙個html元素時， 選擇器權重就派上了用場，而且在開發中經常因為權重問題導致樣式失靈
場景一：同權重選擇器前後覆蓋。
css style:pp
good good study
場景二：不同權重選擇器按權重值覆蓋。
css style:
.test
pgood good study
下面我們具體看一下選擇器權重規則。
選擇器權重如下
selector選擇器
specificity權重
形式！important
infinity（無限大）
p 行間樣式
1，0，0，0
id選擇器
0，1，0，0
#header
類選擇器，屬性選擇器，偽類選擇器
0，0，1，0
.first
.first:hover
標籤選擇器，偽元素
0，0，0，1
pp::before
萬用字元 *
0，0，0，0
*但是在實際場景中第乙個是不提倡使用的，而且選擇器一般沒有這麼單一，存在選擇器疊加的情況,下面我列舉幾種常見的情況，
.test p{} => 權重0,0,1,1
.previous:hover{} => 權重:0,0,2,0
.clear::after{} => 權重:0,0,1,1
#sider .test{} => 權重:0,1,1,0,
注意事項
1，足夠多的在 css語句中類名巢狀權重會不會超過id選擇器
.body .first .second .next .....;
上面的權重會不會超過下面，為什麼 ?
#header;
這個權重並不是十進位制，而是二百五十六進製制，劃重點要考。
2，從父級樣式繼承來的樣式權重最小，比萬用字元*都小
css選擇器優先順序深入理解
一 基礎選擇器 css基礎選擇器有標籤選擇器 類選擇器 id選擇器 通用選擇器 1.標籤選擇器 每個html頁面都由很多個標籤組成，通過標籤選擇器可以對某類標籤應用相應的樣式，chrjslj如對p標籤應用下面的樣式，則頁面中所有的p標籤都會生效 複製 如下 p 2.類選擇器 類選擇器是css非常常用...
深入理解CSS中選擇器的邏輯處理
在過去的很長一段時間中，我們都說 css 是不帶有任何邏輯的，意思是在 css 中沒有控制流，也沒有某種類似於其他程式語言的方式來組織 css。css 天生缺乏邏輯性的問題導致了預處理器的出現。然而業界卻對 css 預處理器褒貶不一，支援預處理器的人認為這彌補了 css 缺失的特性 而反對預處理器的...
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...