CSS選擇器及選擇器優先順序
阿新 • • 發佈：2018-12-25
CSS選擇器：
css選擇器有四種，標籤名選擇器，id選擇器，class選擇器，屬性選擇器，其中屬性選擇器權重最低且不常用
兩個選擇器A和B使用,連寫時,表示選擇滿足A或滿足B的元素
#p2,#p3{
color: blue;
}兩個選擇器A和B使用空格連線時，表示選擇滿足A選擇器的元素內部的滿足B選擇器的元素
#list a{
text-decoration: none;
} 選擇器A和B使用>連寫時，表示選擇滿足A選擇器元素的子元素中滿足B的元素
#list>li{
list-style: none;
}選擇器A和B直接連寫，表示滿足選擇器A且滿足選擇器B的元素
#p4.c2{
background-color: red;
}
在一個父元素中，滿足冒號前選擇器的元素中的第n個元素
#list li:nth-of-type(1){
font-size: 40px;
}偶數個和奇數個
#list li:nth-of-type(2n+1){
font-weight: bold;
}屬性選擇器
選擇頁面中包含lh屬性的元素，lh為自定義屬性
[lh]{
color: orange;
}選擇頁面中att屬性att值為val的元素
[att=val]{
color: brown;
}效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css選擇器</title> <style> /* 標籤名選擇器，選擇頁面中所有h1標籤 */ h1{ color: red; } /* id選擇器，使用#開頭，選擇頁面中id值為p1的元素 */ #p1{ background-color: yellow; } /* class選擇器，使用.開頭，選擇頁面中class值包含c1的元素 */ .c1{ color: green; } /* 兩個選擇器A和B使用,連寫時，表示選擇滿足A或滿足B的元素 */ #p2,#p3{ color: blue; } /* 兩個選擇器A和B使用空格連線時，表示選擇滿足A選擇器的元素內部的滿足B選擇器的元素 */ #list a{ text-decoration: none; } /* 選擇器A和B使用>連寫時，表示選擇滿足A選擇器元素的子元素中滿足B的元素 */ #list>li{ list-style: none; } /* 選擇器A和B直接連寫，表示滿足選擇器A且滿足選擇器B的元素 */ #p4.c2{ background-color: red; } /* 在一個父元素中，滿足冒號前選擇器的元素中的第n個元素 */ #list li:nth-of-type(1){ font-size: 40px; } /* 倒數第n個 */ #list li:nth-last-of-type(1)>a{ color: orange; } /* 偶數個和奇數個 */ #list li:nth-of-type(2n+1){ font-weight: bold; } /* 屬性選擇器 */ /* 選擇頁面中包含lh屬性的元素 */ [lh]{ color: orange; } /* 選擇頁面中att屬性att值為val的元素 */ [att=val]{ color: brown; } </style> </head> <body> <h1>CSS選擇器大全</h1> <p id="p1">id選擇器用#表示</p> <p class="c1">class選擇器使用.表示</p> <p class="c1">class選擇器使用.表示</p> <p id="p2">兩個選擇器使用,連寫</p> <p id="p3">兩個選擇器使用,連寫</p> <ul id="list"> <li><a href="#">111</a></li> <li><a href="#">222</a></li> <li><a href="#">333</a></li> <li><a href="#">444</a></li> </ul> <p id="p4" class="c2">兩個選擇器直接連寫.</p> <P lh>HTML標籤的屬性可以實html屬性也可以是自定義屬性</P> <p att="val">屬性選擇器</p> </body> </html>
選擇器優先順序：
選擇器權重依次為：!important>行內樣式>id選擇器>class選擇器>標籤名選擇器.
當兩個選擇器優先順序一樣時,會選擇靠後的選擇器的樣式（開發中一般不會用到，用處在於匯入外部樣式表後排bug等）,當多個不同的選擇器連用時,優先順序會相加
/* 樣式優先順序權值參考: */
/* !important 10000 */
/* 行內樣式(內聯樣式)(inline style) 1000 */
/* id選擇器 100 */
/* class選擇器 10 */
/* 標籤名選擇器 1 */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 不同的選擇器具有不同的優先順序，頁面中元素最終顯示的樣式是優先順序最高的選擇器的樣式 */ /* 樣式優先順序 */ /* !important>行內樣式>id選擇器>class選擇器>標籤名選擇器 */ #title{ color: red; } /* 當兩個選擇器優先順序一樣時,會選擇靠後的選擇器的樣式 */ .color{ color: blue; } .second{ color: orange; h1{ color: green; } #title.color{ color: black; } </style> </head> <body> <h1 id="title" class="color second">css選擇器優先順序</h1> </body> </html>