選擇器權重
樣式類型
樣式類型分為三類
1瓤逼、行間
<h1 style="font-size:12px;color:#000;">我的行間CSS樣式笼吟。</h1>
2、內聯(lián)
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
3抛姑、外部
<link rel="stylesheet" href="css/style.css">
選擇器類型
- 1赞厕、ID #id
- 2、class .class
- 3定硝、標簽 p
- 4皿桑、通用 *
- 5、屬性 [type="text"]
- 6、偽類 :hover
- 7诲侮、偽元素 ::first-line
- 8镀虐、子選擇器、相鄰選擇器
權重計算規(guī)則
第一等：代表內聯(lián)樣式沟绪，如: style=””刮便，權值為1000。
第二等：代表ID選擇器绽慈，如：#content恨旱，權值為0100。
第三等：代表類坝疼，偽類和屬性選擇器搜贤，如.content，權值為0010钝凶。
第四等：代表類型選擇器和偽元素選擇器仪芒，如div p，權值為0001耕陷。
通配符掂名、子選擇器、相鄰選擇器等的哟沫。如*饺蔑、>、+,權值為0000嗜诀。
繼承的樣式沒有權值膀钠。
比較規(guī)則
遵循如下法則：
- 選擇器都有一個權值，權值越大越優(yōu)先裹虫；
- 當權值相等時，后出現(xiàn)的樣式表設置要優(yōu)于先出現(xiàn)的樣式表設置融击；
- 創(chuàng)作者的規(guī)則高于瀏覽者：即網頁編寫者設置的 CSS 樣式的優(yōu)先權高于瀏覽器所設置的樣式筑公；
- 繼承的 CSS 樣式不如后來指定的 CSS 樣式；
- 在同一組屬性設置中標有!important規(guī)則的優(yōu)先級最大
- 通配符尊浪、子選擇器匣屡、相鄰選擇器等的。雖然權值為0000拇涤，但是也比繼承的樣式優(yōu)先捣作。
！important
- !important 的作用是提升優(yōu)先級鹅士，換句話說券躁。加了這句的樣式的優(yōu)先級是最高的（比內聯(lián)樣式的優(yōu)先級還高)。
<style>
p{
color:red !important;
}
</style>
<p style="color:blue;">我顯示紅色</p>
- ie7+和別的瀏覽器對important的這種作用的支持度都很好。只有ie6有些bug
p{
color:red !important;
color:blue;
}//會顯示blue
但是這并不說明ie6不支持important也拜，只是支持上有些bug以舒。看下面
p{
color:red !important;
}
p{
color:blue;
} //這樣就會顯示的是red慢哈。說明ie6還是支持important的蔓钟。</pre>
我們再來看一個具體的例子：假如有以下組樣式規(guī)則，你能判斷出HTML代碼中的兩個標題是什么顏色嗎卵贱？
#content div#main-content h2{
color:red;
}
#content #main-content>h2{
color:blue
}
body #content div[id="main-content"] h2{
color:green;
}
#main-content div.paragraph h2{
color:orange;
}
#main-content [class="paragraph"] h2{
color:yellow;
}
div#main-content div.paragraph h2.first{
color:pink;
}
以下是HTML代碼：
<div id="content">
<div id="main-content">
<h2>CSS簡介</h2>
<p>CSS（Cascading Style Sheet滥沫，可譯為“層疊樣式表”或“級聯(lián)樣式表”）是一組格式設置規(guī)則，用于控制Web頁面的外觀键俱。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的優(yōu)點</h2>
<p>1兰绣、表現(xiàn)和內容相分離 2、提高頁面瀏覽速度 3方妖、易于維護和改版 4狭魂、使用CSS布局更符合現(xiàn)在的W3C標準.</p>
</div>
</div>
</div>
判斷出來了么？答案是：兩個標題都是紅色的党觅！
讓我們來一起算算六個樣式規(guī)則各自的特殊性的值：
第一個特殊性的值=2100+21=202
第二個特殊性的值=2100+1=201
第三個特殊性的值=1100+110+31=113
第四個特殊性的值=1100+110+21=112
第五個特殊性的值=1100+110+11=111
第六個特殊性的值=1100+210+3*1=123
第一個樣式規(guī)則以其202的高分一舉奪得了本次樣式選擇器特殊性大賽的冠軍雌澄，后面一些規(guī)則雖然看起來好像更復雜，但特殊性并不是拼誰的選擇器表達式寫得更長杯瞻，ID選擇器才是王道镐牺！
