css---選擇器的特殊性

時間 2019-11-17

標籤 css 選擇器特殊性欄目 CSS 简体版

原文原文鏈接

特殊性這點吃了虧，是該梳理一下了~css

先說一下大概的選擇器，沾代碼html

最權威的仍是《css權威指南》spa

咱們把特殊性分爲4個等級，每一個等級表明一類選擇器，每一個等級的值爲其所表明的選擇器的個數乘以這一等級的權值，最後把全部等級的值相加得出選擇器的特殊值。code

4個等級的定義以下：htm

l 第一等：表明內聯樣式，如: style=」」，權值爲1000。blog

l 第二等：表明ID選擇器，如：#content，權值爲100。it

l 第三等：表明類，僞類和屬性選擇器，如.content，權值爲10。class

l 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1。css選擇器

注意：通用選擇器（*），子選擇器（>）和相鄰同胞選擇器（+）並不在這四個等級中，因此他們的權值都爲0。im

栗子來了

<html>
#content div#main-content h2{
color:red;
 }
/*=2*100+2*1=202*/

#content #main-content>h2{
color:blue
 }
/*=2*100+1=201*/

body #content div[id="main-content"] h2{
color:green;
 }
/*=1*100+1*10+3*1=113*/

#main-content div.paragraph h2{
color:orange;
 }
/*=1*100+1*10+2*1=112*/

#main-content [class="paragraph"] h2{
color:yellow;
 }
/*=1*100+1*10+1*1=111*/

div#main-content div.paragraph h2.first{
color:pink;
}
/*=1*100+2*10+3*1=123*/
</html>

---------------------------------------------------------------------------------------------------------------------------

css選擇器僞類

a:link{color：navy；}未訪問的地址的全部錨。

a:visited{color：gray；}已訪問的地址的全部錨。

a:hover{color：red；}指示鼠標停留在某個超連接上去。

a:active{color：yellow；}鼠標停留在一個超連接上，鼠標點擊就會激活這個超連接。