一、類型選擇器:定義某種標籤樣式的選擇器
/* 標籤選擇器 */
p{
color:red;
}
div{
color:gray;
}
/* 類選擇器 */
.firstclass{
color:blue;
}
/*ID選擇器*/
#firstid{
padding:10px;
}
二、屬性選擇器:包含某種屬性的選擇器
- 包含完整屬性的元素
- [屬性A]---->包含該屬性A的所有元素
- [屬性A=屬性值B]---->包含屬性A且屬性值爲B的所有元素
- [屬性A~=屬性值B]---->包含屬性A且屬性值爲B,即使屬性A還有其他屬性值,均以B爲優先
- 包含符合屬性表達式的元素
- [屬性A |= abc]---->選擇屬性值爲唯一的字符串abc或以“-”連接的abc-bcd開頭的元素("-"用於處理語言編碼)
- [屬性A ^= abc]---->選擇屬性值爲字符串abc開頭的元素
- [屬性A $= abc]---->選擇屬性值爲字符串abc結尾的元素
- [屬性A *= abc]---->選擇屬性值包含字符串abc的元素
三、僞類選擇器:節點處於確定狀態,用:定義
四、僞元素選擇器:位於節點內容的確定位置,用::定義
僞類和僞元素內容較多請自行覓食:
五、組合選擇器:包含遞進關聯關係的選擇器組合(作用於單個節點)
- A B{}:選擇A節點下的所有後代節點
- A>B{}:選擇A節點下的第一個後代節點
- A+B{}:A,B有相同父節點,B緊跟A之後
- A~B{}:A,B有相同父節點,B在A之後但不一定緊跟
六、多用選擇器:使用逗號分隔,可適配多個類型選擇器(作用於多個節點)
- A,B,C,D{}:多個結點共同作用
參考資料:
https://www.cnblogs.com/gugege/p/6340422.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/position