CSS重塑計劃(一):選擇符
元素選擇符
*
通配選擇符(Universal Selector),選擇全部元素對象。
E
類型選擇符(Type Selector),以文檔語言對象類型做爲選擇符。
E#myid
id選擇符(ID Selector),以惟一標識符id屬性等於myid的E對象做爲選擇符。
E.myclass
class選擇符(Class Selector),以class屬性包含myclass的E對象做爲選擇符。code
關係選擇符
E F
包含選擇符(Descendant combinator),選擇全部被E元素包含的F元素。
E>F
子選擇符(Child combinator),選擇全部做爲E元素的子元素F。
E+F
相鄰選擇符(Adjacent sibling combinator),選擇緊貼在E元素以後F元素。
E~F
(CSS3)
兄弟選擇符(General sibling combinator),選擇E元素全部兄弟元素F。對象
屬性選擇符
E[att]
選擇具備att屬性的E元素。
E[att="val"]
選擇具備att屬性且屬性值等於val的E元素。
E[att~="val"]
選擇具備att屬性且屬性值爲一用空格分隔的字詞列表,其中一個等於val的E元素。
E[att|="val"]
選擇具備att屬性且屬性值爲以val開頭並用鏈接符"-"分隔的字符串的E元素,若是屬性值僅爲val,也將被選擇。
E[att^="val"]
(CSS3)
選擇具備att屬性且屬性值爲以val開頭的字符串的E元素。
E[att$="val"]
(CSS3)
選擇具備att屬性且屬性值爲以val結尾的字符串的E元素。
E[att*="val"]
(CSS3)
選擇具備att屬性且屬性值爲包含val的字符串的E元素。事件
僞類選擇符
E:link
設置超連接a在未被訪問前的樣式。
E:visited
設置超連接a在其連接地址已被訪問過期的樣式。
E:hover
設置元素在其鼠標懸停時的樣式。
E:active
設置元素在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式。
E:focus
設置元素在成爲輸入焦點(該元素的onfocus事件發生)時的樣式。
E:lang(fr)
匹配使用特殊語言的E元素。
E:first-child
匹配父元素的第一個子元素E。
@page:first
設置頁面容器第一頁使用的樣式。僅用於@page規則
@page:left
設置頁面容器位於裝訂線左邊的全部頁面使用的樣式。僅用於@page規則
@page:right
設置頁面容器位於裝訂線右邊的全部頁面使用的樣式。僅用於@page規則
E:not(s)
(CSS3)
匹配不含有s選擇符的元素E。
E:root
(CSS3)
匹配E元素在文檔的根元素。
E:last-child
(CSS3)
匹配父元素的最後一個子元素E。
E:only-child
(CSS3)
匹配父元素僅有的一個子元素E。
E:nth-child(n)
(CSS3)
匹配父元素的第n個子元素E。
E:nth-last-child(n)
(CSS3)
匹配父元素的倒數第n個子元素E。
E:first-of-type
(CSS3)
匹配同類型中的第一個同級兄弟元素E。
E:last-of-type
(CSS3)
匹配同類型中的最後一個同級兄弟元素E。
E:only-of-type
(CSS3)
匹配同類型中的惟一的一個同級兄弟元素E。
E:nth-of-type(n)
(CSS3)
匹配同類型中的第n個同級兄弟元素E。
E:nth-last-of-type(n)
(CSS3)
匹配同類型中的倒數第n個同級兄弟元素E。
E:empty
(CSS3)
匹配沒有任何子元素(包括text節點)的元素E。
E:checked
(CSS3)
匹配用戶界面上處於選中狀態的元素E。(用於input type爲radio與checkbox時)
E:enabled
(CSS3)
匹配用戶界面上處於可用狀態的元素E。
E:disabled
(CSS3)
匹配用戶界面上處於禁用狀態的元素E。
E:target
(CSS3)
匹配相關URL指向的E元素。文檔
僞對象選擇符
E:first-letter/E::first-letter
(CSS3)
設置對象內的第一個字符的樣式。
E:first-line/E::first-line
(CSS3)
設置對象內的第一行的樣式。
E:before/E::before
(CSS3)
設置在對象前(依據對象樹的邏輯結構)發生的內容。用來和content屬性一塊兒使用
E:after/E::after
(CSS3)
設置在對象後(依據對象樹的邏輯結構)發生的內容。用來和content屬性一塊兒使用
E::placeholder
(CSS3)
設置對象文字佔位符的樣式。
E::selection
(CSS3)
設置對象被選擇時的顏色。字符串