CSS又名層疊樣式表，是由一個個樣式規(guī)則組成，而每一個樣式規(guī)則又可以分為兩部分：選擇符與聲明(或叫樣式)。
選擇符就是CSS的選擇器，用來對特定的元素進(jìn)行樣式設(shè)置。一個元素的子元素能繼承該元素的樣式，但如果子元素設(shè)置了樣式，也能覆寫繼承下來的樣式，就像板頁巖這樣累在一起。而如何讓元素顯示出想要的樣式，我們就必須對權(quán)重這個概念有所了解。
權(quán)重你可以說是針對樣式規(guī)則的，也可以說針對選擇符。之所以這樣說，因?yàn)橛幸粋€重要的標(biāo)識符! important可以放到樣式聲明的最后，用來無視本文重點(diǎn)說的權(quán)重等級。我覺得最好還是不要用這東西，用多了會嚴(yán)重擾亂CSS的權(quán)重等級。
現(xiàn)有的規(guī)則一般是這么定的：
1、將一個樣式的權(quán)重分為5級，初始值為（0，0，0，0，0）。
2、第一個值代表的是!important，如果這個樣式上面有!important就算是1，不然是0。
3、第二個是代表的在html中直接作用在節(jié)點(diǎn)上的內(nèi)聯(lián)樣式，如果這個樣式是內(nèi)聯(lián)樣式，就是1，不然是0。
4、第三個值是id選擇器，如果這個樣式是在id選擇器中的就+1。前面選擇器中有多少個id選擇器，每個都+1。
5、第四個值是class選擇器、屬性選擇器，該樣式所在的選擇器每有一個class選擇器、屬性選擇器，都+1。
6、第五個值是標(biāo)簽選擇器，該樣式前面每有一個，都+1。
在都確認(rèn)完之后，從第一個值開始對比，只要值比別的大，那么這個樣式就是權(quán)重最重的。如果第一個值一樣，則依次比較下一個值。
這基本就是我整理到的網(wǎng)上的幾乎全部樣式權(quán)重了，我看的還挺清楚，覺得自己都明白了。直到我突然碰到了這么一段代碼。
<!DOCTYPE html>
<html>
<head>
<title>css權(quán)重</title>
</head>
<style type="text/css">
#a {
color: white;
}
.b {
color: red;
}
.b:hover {
color: blue;
}
.b:first-letter {
color: gray;
}
.b:first-line {
color: #eee;
}
div.b {
color: orange;
}
.b.c {
color: yellow;
}
</style>
<body>
<div class="b c d" id="a">來自馬三立的相聲，也是馬三立最著名的段子之一。馬三立是深受廣大民眾喜愛的著名表演藝術(shù)家、相聲“泰斗”。祖籍甘肅省永昌，生于北京，回族。他12歲跟父親馬德祿學(xué)藝，后拜著名相聲演員周德山(周蛤蟆)為師，演出的傳統(tǒng)相聲有200多個。</div>
</body>
</html>
我被這:hover，以及:first-line給直接難住了。對于這些偽類偽元素，我一向認(rèn)為這些東西都是凌駕于整套css權(quán)重體系的。但是事實(shí)不是這樣。
結(jié)果是，:hover的權(quán)重比不過#a，跟.b.c權(quán)重平級，比div.b權(quán)重要高。這么一看這個在我前面寫的權(quán)重體系中跟class選擇器、屬性選擇器平齊。我覺得偽類偽類，實(shí)際上就是一個class類，雖然在使用上有本質(zhì)區(qū)別，但是在設(shè)計上可能就是同一類型，所以會直接跟class在同一層級中。
:first-line和:first-child均不受任何影響，即使在#a上加上!important，也是一樣顯示自己獨(dú)立的樣式。這兩個偽元素，實(shí)際上像是在這個元素底下偷偷地聲明了一個span元素，然后這個span元素繼承了所有的父級元素屬性，但是聲明在自己元素上面的樣式是會蓋住繼承下來的屬性的。所以看起來他們的權(quán)重最高。
大家如果感興趣的話建議還是跑一下代碼，自己試驗(yàn)一下比較好。
