CSS--選擇符大全(經常使用css選擇符)

(一)元素選擇符

  1. E(某個元素,如p)
  2. id(使用id,如#idName)
  3. class(使用class,如.myclass)
  4. 通配符:*

(二)關係選擇符

  1. 包含選擇符:E F(E全部的F包含子代,孫代,子子孫孫等等)
  2. 子選擇符:E<F(與包含不一樣的是,子選擇符僅限於子代)
  3. 相鄰選擇符:E+F(和E相鄰的F,相隔一個都不算)
  4. 兄弟選擇符:E~F(和E同級的F的算)

(三)屬性選擇符:

  1. E[att](E中帶有某個att屬性的元素)
  2. E[att="val"] (E中帶有att且值爲val的元素)
  3. E[att~="val"] (E中包含att屬性,中存在val值)
  4. E[att^="val"] (E中att屬性值以val開頭的元素)
  5. E[att$="val"] (E中att屬性值爲以val結尾的元素)
  6. E[att*="val"] (E中att屬性值爲包含val字符的元素)
  7. E[att|=="val"] (E中att屬性值爲val 或者是val-鏈接的字符串)

(四)僞類選擇符

(基於元素某種特性定義的類,僞類通俗點就你不須要再本身定義class,直接使用便可)css

  1. E:link (a元素沒有被訪問時)
  2. E:visited (a元素已經被訪問了)
  3. E:hover (鼠標懸浮在元素時)
  4. E:active (鼠標點擊到釋放時)
  5. E:focus (元素成爲輸入焦點時)
  6. E:lang(fr) (匹配使用特殊語言)
  7. E:not(s) (匹配沒有s樣式的元素E)
  8. E:root (匹配E的根元素)
  9. E:first-child (匹配父元素第一個子元素E)
  10. E:last-child(css3) (匹配父元素的最後一個子元素E)
  11. E:only-child(匹配父元素僅有的元素E)
  12. E:nth-child(n)(匹配父元素第n個子元素E)
  13. E:nth-last-child(n)(匹配父元素倒數第n個子元素E)
  14. E:first-of-type(匹配同類型第一個同級兄弟元素E)
  15. E:empty(匹配沒有任何子元素(包括text節點)的E)
  16. E:checked:(匹配處於選中狀態的元素E,input的radio與checkbox)
  17. E:enabled :(匹配處於可用狀態的元素E)
  18. E:disabled: (匹配處於不能夠狀態的元素E)
  19. E:target: (匹配相關url執行的E元素)

(五)僞對象選擇符

  1. E:first-letter (首字下沉)
  2. E:first-line (第一行樣式)
  3. E:before (設置在對象前(依據對象樹的邏輯結構)發生的內容。用來和content屬性一塊兒使用,而且必須定義content屬性)
  4. E:after (設置在對象後(依據對象樹的邏輯結構)發生的內容。用來和content屬性一塊兒使用,而且必須定義content屬性)
  5. E::placeholder (設置input佔位符的樣式)
  6. E::selection (設置文本被選擇時的樣式)

本篇是我的筆記,可常常看看。
向前走,也別忘記要多回顧css3

相關文章
相關標籤/搜索