CSS選擇器食用法則

一、類型選擇器:定義某種標籤樣式的選擇器

/* 標籤選擇器 */
p{
    color:red;
}
div{
    color:gray;
}
/* 類選擇器 */
.firstclass{
    color:blue;
}
/*ID選擇器*/
#firstid{
    padding:10px;
}

二、屬性選擇器:包含某種屬性的選擇器

  • 包含完整屬性的元素 
  1. [屬性A]---->包含該屬性A的所有元素
  2. [屬性A=屬性值B]---->包含屬性A且屬性值爲B的所有元素
  3. [屬性A~=屬性值B]---->包含屬性A且屬性值爲B,即使屬性A還有其他屬性值,均以B爲優先
  • 包含符合屬性表達式的元素
  1. [屬性A |= abc]---->選擇屬性值爲唯一的字符串abc或以“-”連接的abc-bcd開頭的元素("-"用於處理語言編碼)
  2. [屬性A ^= abc]---->選擇屬性值爲字符串abc開頭的元素
  3. [屬性A $= abc]---->選擇屬性值爲字符串abc結尾的元素
  4. [屬性A *= abc]---->選擇屬性值包含字符串abc的元素

三、僞類選擇器:節點處於確定狀態,用:定義

四、僞元素選擇器:位於節點內容的確定位置,用::定義

僞類和僞元素內容較多請自行覓食:

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

五、組合選擇器:包含遞進關聯關係的選擇器組合(作用於單個節點)

  • 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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章