也許你已經學會了CSS的三個簡單常用的選擇器：#ID，.class，標籤選擇器，可是這些就足夠了嗎？隨著CSS3的到來，作為前端開發者需要掌握下面三十個基本的選擇器，這樣才可以在平時開發中得心用手。
本文中將綜合前端開發中常用的30個CSS3選擇器，並且附帶了瀏覽器的支持情況，希望對大家有所幫助。
1、*：通用元素選擇器
* {
margin : 0 ;
padding : 0 ;
}
*選擇器也可以應用到子選擇器中，例如下麵的代碼：
#container * {
border : 1px solid black ;
}
這樣ID為container
的所有子標籤元素都被選中了，並且設置了border。
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
#ID：ID選擇器
#container {
width : 960px ;
margin : auto ;
}
ID選擇器是CSS中效率最高的選擇器，使用的時候要保證ID的唯一性。
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
.class:類選擇器
.error {
color : red ;
}
類選擇器效率低於ID選擇器，一個頁面可以有多個class，並且class可以放在不同的標籤中使用。
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
XY：標籤組合選擇器
li a {
text-decoration : none ;
}
標籤組合選擇器也是常用的選擇器。
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X：標籤選擇器
a { color : red ; }
ul { margin-left : 0 ; }
如果你只是想要頁面中的某個標籤樣式改變，可以選擇使用標籤選擇器。
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:visited
and X:link
a :link { color : red ; }
a :visted { color : purple ; }
偽類選擇器，最常用的為A標籤
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X +
Y：毗鄰元素選擇器
ul + p {
color : red ;
}
毗鄰元素選擇器，匹配的是所有緊隨X元素之後的同級元素Y
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X
> Y：子元素選擇器
div #container > ul {
border : 1px solid black ;
}
匹配#container下的所有子元素。
關於
關於
X>Y和XY的區別請看下麵的html實例：<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
選擇器
#container > ul只會匹配到第一個UL，也就是#container的子元素UL，而不是li裡面的ul，但是div ul則可以匹配到所有DIV裡面的ul。
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X ~
Y：
ul ~ p {
color : red ;
}
匹配任何在X元素之後的同級P元素。也就是選擇了UL之後的同級所有的元素。
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[title]：屬性選擇器
a [ title ] {
color : green ;
}
匹配具有某屬性的標籤，例如實例中是匹配具有title屬性的a標籤。
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[href="foo"]
a [ href = "http://js8.in" ] {
color : #1f6053 ; /* nettuts green */
}
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[href*="nettuts"]
a [ href *= "tuts" ] {
color : #1f6053 ; /* nettuts green */
}
屬於屬性選擇器，匹配href中所有含有tuts的標籤。正則匹配
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[href^="http"]
a [ href ^= "http" ] {
background : url ( path/to/external/icon.png ) no-repeat ;
padding-left : 10px ;
}
與上面的屬相選擇標籤類似，但是匹配的以http開頭的A標籤，正則匹配
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[href$=".jpg"]
a [ href$ = ".jpg" ] {
color : red ;
}
匹配屬性中以.jpg結尾的標籤，正則匹配，也是屬性選擇器的一種
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[data-*="foo"]
如果你要匹配所有的圖片鏈接，你可以通過下面的CSS來實現：
a [ href$ = ".jpg" ] ,
a [ href$ = ".jpeg" ] ,
a [ href$ = ".png" ] ,
a [ href$ = ".gif" ] {
color : red ;
}
但是如果我們給a標籤添加一個data-filetype屬性，我們就可以使用下面的CSS來快速的選擇我們需要匹配的標籤了。
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
</html>
<pre lang="css">a[data-filetype="image"] {
color: red;
}
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X[foo~="bar"]
a [ data-info~ = "external" ] {
color : red ;
}
a [ data-info~ = "image" ] {
border : 1px solid black ;
}
匹配屬性中具有多個空格分隔的值、其中一個值等於“bar”的X元素，例如下面的例子：
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:checked
input [ type = radio ] :checked {
border : 1px solid black ;
}
相容性
1.
IE9
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:after
.clearfix :after {
content : "" ;
display : block ;
clear : both ;
visibility : hidden ;
font-size : 0 ;
height : 0 ;
}
.clearfix {
* display : inline- block ;
_height : 1 % ;
}
before和after是在選擇的標籤之前或者之後插入內容，一般用於清除浮動，但是對於IE6、IE7是不可用的。
相容性
1.
IE8+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:hover
div :hover {
background : #e3e3e3 ;
}
最常用的就是A標籤了，但是在IE6瀏覽器下除了A標籤之外，其他標籤
div:hover不匹配。
相容性
1.
IE6+（IE6只可以使用在A標籤中）
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:not(selector)
*: not ( p ) {
color : green ;
}
選擇除了（）中選擇器之外的標籤元素。
相容性
1.
IE9
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X::pseudoElement
p : :first-line {
font-weight : bold ;
font-size : 1.2em ;
}
p : :first-letter {
float : left ;
font-size : 2em ;
font-weight : bold ;
font-family : cursive ;
padding-right : 2px ;
}
分別用於匹配元素的第一行和第一個字母。看實例：
相容性
1.
IE6+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:nth-child(n)
li :nth- child ( 3 ) {
color : red ;
}
匹配X元素中從頭數第幾個標籤，例如上面的代碼是匹配的是第三個li標籤。
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
X:nth-last-child(n)
li :nth-last- child ( 2 ) {
color : red ;
}
與上一個選擇器相反，這個選擇器是倒序匹配第幾個標籤，上面的代碼的意思是匹配倒數第二個li標籤
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
X:nth-of-type(n)
ul :nth-of- type ( 3 ) {
border : 1px solid black ;
}
與
:nth-child()作用類似，但是僅匹配使用同種標籤的元素
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
X:nth-last-of-type(n)
ul :nth-last-of- type ( 3 ) {
border : 1px solid black ;
}
與
:nth-last-child()作用類似，但是僅匹配使用同種標籤的元素
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
X:first-child
ul li :first-child {
border-top : none ;
}
匹配其父元素的第n個子元素，第一個編號為1
相容性
1.
IE7+
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:last-child
ul > li :last-child {
color : green ;
}
匹配其父元素的倒數第n個子元素，第一個編號為1
相容性
1.
IE9
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:only-child
div p :only-child {
color : red ;
}
匹配父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)
相容性
1.
IE9
2.
Firefox
3.
Chrome
4.
Safari
5.
Opera
X:only-of-type
li :only-of-type {
font-weight : bold ;
}
匹配父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
X:first-of-type
li :only-of-type {
font-weight : bold ;
}
匹配父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1)
相容性
1.
IE9
2.
Firefox 3.5+
3.
Chrome
4.
Safari
5.
Opera
沒有留言:
張貼留言