場(chǎng)景
為什么我在這里設(shè)置的css樣式不起作用殿漠？
可能你在某處定義了一個(gè)更高權(quán)重的規(guī)則，導(dǎo)致此處規(guī)則不生效绞幌。
什么是權(quán)重
實(shí)際上它就是CSS的優(yōu)先級(jí)啊蕾哟，它決定了你css規(guī)則怎樣被瀏覽器解析直到生效。
- 權(quán)重還是可以疊加的莲蜘，比如說(shuō)：
權(quán)重的級(jí)別根據(jù)選擇器被劃分為四個(gè)分類：
行內(nèi)樣式谭确，id，類與屬性票渠，以及元素.
我們經(jīng)常會(huì)寫
.test div{…}
這個(gè)的權(quán)重就會(huì)疊加逐哈。
- 權(quán)重的選擇和定義的順序有關(guān)
如果兩個(gè)選擇器權(quán)重值相同，則最后定義的規(guī)則被計(jì)算到權(quán)重中(后面定度的CSS規(guī)則權(quán)重要更大问顷，會(huì)取代前面的CSS規(guī)則)
優(yōu)先級(jí)
行內(nèi)樣式>id>類與屬性>元素
當(dāng)然我們也見(jiàn)過(guò)這樣的
.a{color:red !importent;}
!important用于單獨(dú)指定某條樣式中的單個(gè)屬性昂秃。
對(duì)于被指定的屬性，有!important指定的權(quán)重值大于所有未用!important指定的規(guī)則杜窄。
但是我們一般是不會(huì)使用的肠骆，因?yàn)檫@樣的寫法會(huì)對(duì)項(xiàng)目交接有很大的阻礙。
下面來(lái)說(shuō)一下元素
元素跟偽元素選擇器：
偽元素選擇器只包含以下幾種:
::after
::before
::first-letter
::first-line
::selecton
偽元素跟偽類都是選擇器的補(bǔ)充
偽類表示的是一種“狀態(tài)”：比如hover塞耕，active等等蚀腿；
偽元素表示文檔的某個(gè)確定部分的表現(xiàn)：比如::first-line 偽元素只作用于你前面元素選擇器確定的一個(gè)元素的第一行。
如何確定權(quán)重
權(quán)重記憶口訣扫外。
從0開(kāi)始唯咬，
一個(gè)行內(nèi)樣式+1000纱注，
一個(gè)id+100，
一個(gè)屬性選擇器/class或者偽類+10胆胰，
一個(gè)元素名，或者偽元素+1.
參考
http://www.w3cplus.com/css/css-specificity-things-you-should-know.html
