CSS又名層疊樣式表胰默，是由一個個樣式規(guī)則組成，而每一個樣式規(guī)則又可以分為兩部分：選擇符與聲明(或叫樣式)漓踢。
選擇符就是CSS的選擇器牵署，用來對特定的元素進行樣式設(shè)置。一個元素的子元素能繼承該元素的樣式喧半，但如果子元素設(shè)置了樣式奴迅，也能覆寫繼承下來的樣式，就像板頁巖這樣累在一起挺据。而如何讓元素顯示出想要的樣式取具，我們就必須對權(quán)重這個概念有所了解。
權(quán)重你可以說是針對樣式規(guī)則的扁耐，也可以說針對選擇符暇检。之所以這樣說，因為有一個重要的標(biāo)識符! important可以放到樣式聲明的最后婉称，用來無視本文重點說的權(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é)點上的內(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)重體系的与帆。但是事實不是這樣了赌。
結(jié)果是，:hover的權(quán)重比不過#a玄糟，跟.b.c權(quán)重平級揍拆，比div.b權(quán)重要高。這么一看這個在我前面寫的權(quán)重體系中跟class選擇器茶凳、屬性選擇器平齊嫂拴。我覺得偽類偽類，實際上就是一個class類贮喧，雖然在使用上有本質(zhì)區(qū)別筒狠，但是在設(shè)計上可能就是同一類型，所以會直接跟class在同一層級中箱沦。
:first-line和:first-child均不受任何影響辩恼，即使在#a上加上!important，也是一樣顯示自己獨立的樣式谓形。這兩個偽元素灶伊，實際上像是在這個元素底下偷偷地聲明了一個span元素，然后這個span元素繼承了所有的父級元素屬性寒跳，但是聲明在自己元素上面的樣式是會蓋住繼承下來的屬性的聘萨。所以看起來他們的權(quán)重最高。
大家如果感興趣的話建議還是跑一下代碼童太，自己試驗一下比較好米辐。
