css3選擇器
基本選擇器
層次選擇器
僞類選擇器
僞元素
屬性選擇器
動態僞類選擇器
目標僞類選擇器
語言僞類選擇器
UI元素狀態僞類選擇器
結構僞類選擇器
否定僞類選擇器
選擇器
類型
描述
兼容性
css版本
*
通配選擇器
*{margin:0;padding:0}, .demo * {background:orange}all
1
E
元素選擇器
ul {background:grey}all
1
#id
all
1
.class
all
1
selector,celector2
all
1
選擇器
類型
描述
兼容性
css版本
E F
後代選擇器
匹配F元素且是E元素的後代
all
1
E > F
後代選擇器
匹配F元素且是E的直接子元素
IE7+
2
E + F
相鄰兄弟選擇器
匹配F元素且是緊貼着E的F元素
IE7+
2
E ~ F
通用選擇器
匹配E元素後所有F元素
IE7+
3
選擇器
類型
描述
兼容性
css版本
E:link
鏈接僞類選擇器
E元素，定義了超鏈接並未被訪問過
all
1
E:visited
鏈接僞類選擇器
E元素，定義了超鏈接已被訪問過
all
1
E:active
用戶行爲僞類選擇器
IE8+
1
E:hover
用戶行爲僞類選擇器
E元素，鼠標停留在元素E上
all
1
E:focus
用戶行爲僞類選擇器
E元素，獲得焦點
IE8+
1
選擇器
類型
描述
兼容性
css版本
E:target
鏈接僞類選擇器
E元素，元素被相關URL指向
IE9+、Opera9.6+
3
E:target 示例
選擇器
類型
描述
兼容性
css版本
E:lang
語言僞類選擇器
一般示例?
IE8+、Opera9.2+
2
<!DOCTYPE html>
< htmllang = " en" > < style>
:lang(en) {
quotes : '"' '"' ;
}
:lang(fr) {
quotes : '《' '》' ;
}
</ style> < body> < p> < q> </ q> </ p> </ body> </ html>
選擇器
類型
描述
兼容性
css版本
E:checked
選中狀態僞類選擇器
匹配所有單選按鈕或者複選按鈕
IE9+
3
E:enabled
啓用狀態僞類選擇器
啓用的表單按鈕
IE9+
3
E:disable
不可用狀態僞類選擇器
禁用的表單按鈕
IE9+
3
選擇器llllllllllllllIIIIIIIIIII
類型
描述
兼容性
css版本
E:fisrt-child
作爲父元素的第一個子元素的元素E。與E:nth-child(1)等同
IE9+
3
E:last-child
作爲父元素的最後一個子元素的元素E。與E:nth-last-child(1)等同
IE9+
3
E:root
選擇匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是html，此時該選擇器與html類型選擇器匹配的內容相同
IE9+
3
E F:nth-child(n)
選擇父元素E的第n個子元素F。其中n可以是整數（1，2，3）、關鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值爲1，而不是0.
IE9+
3
E F:nth-last-child(n)
選擇父元素E的倒數第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最後一個元素，與last-child等同
IE9+
3
E:nth-of-type(n)
選擇父元素內具有指定類型的第n個E元素
IE9+
3
E:nth-last-of-type(n)
選擇父元素內具有指定類型的倒數第n個E元素
IE9+
3
E:first-of-type
選擇父元素內具有指定類型的第一個E元素，與E:nth-of-type(1)等同
IE9+
3
E:last-of-tye
選擇父元素內具有指定類型的最後一個E元素，與E:nth-last-of-type(1)等同
IE9+
3
E:only-child
選擇父元素只包含一個子元素，且該子元素匹配E元素
IE9+
3
E:only-of-type
選擇父元素只包含一個同類型子元素，且該子元素匹配E元素
IE9+
3
E:empty
選擇沒有子元素的元素，而且該元素也不包含任何文本節點
IE9+
3
選擇器
類型
描述
兼容性
css版本
E:not(F)
否定僞類選擇器
匹配除了F元素的所有E元素
IE9+
3
屬性
描述
兼容性
css版本
::frist-letter
選擇文本塊的第一個字母
::frist-line
選擇文本塊的第一行
::before
元素前插入icon但不會成爲DOM一部分，但是可以添加樣式
::after
::selection
選擇的文本
IE9+
選擇器
描述
兼容性
css版本
[attr]
用於選取帶有指定屬性的元素。
7+
[attr=val]
用於選取帶有指定屬性和值的元素。
7+
[attr~=val]
用於選取屬性值中包含指定詞彙的元素。
7+
[attr|=val]
用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
7+
[attr^=val]
匹配屬性值以指定值開頭的每個元素。
7+
[attr$=val]
匹配屬性值以指定值結尾的每個元素。
7+
[attr*=val]
匹配屬性值中包含指定值的每個元素。
7+
通配符解釋
通配符
功能描述
示例
^
匹配起始符
span[class^=span] 以類名span開頭的所有span元素
$
匹配終止符
a[href$=pdf] 匹配以pdf結尾的href屬性的所有a元素
*
匹配任意字符
a[title*=site] 匹配a元素，而且a元素的title屬性值中任意位置有site字符的字符串
