2011年12月1日 星期四

30個必須掌握CSS3選擇器


也許你已經學會了CSS的三個簡單常用的選擇器:#ID.class,標籤選擇器,可是這些就足夠了嗎?隨著CSS3的到來,作為前端開發者需要掌握下面三十個基本的選擇器,這樣才可以在平時開發中得心用手。
本文中將綜合前端開發中常用的30CSS3選擇器,並且附帶了瀏覽器的支持情況,希望對大家有所幫助。

1*:通用元素選擇器

*  {   
 margin :  0 ;   
 padding :  0 ;   
}
*選擇器是選擇頁面上的全部元素,上面的代碼作用是把全部元素的marginpadding設為0,最基本的清除默認CSS樣式方法
*選擇器也可以應用到子選擇器中,例如下麵的代碼:
#container  *  {   
 border :  1px  solid  black ;   
}
這樣IDcontainer 的所有子標籤元素都被選中了,並且設置了border
相容性
1.    IE6+
2.    Firefox
3.    Chrome
4.    Safari
5.    Opera

#IDID選擇器

#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>YXY的區別請看下麵的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 */  
}
也屬於屬性選擇器,匹配屬性中為某個值的標籤。例如實例中匹配的為href="
http://js8.in
 "a標籤,而其他鏈接的a標籤不選擇。
相容性
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 ;  
}
這個選擇器主要用於
checkbox
,選擇checkbox為當前選中的那個標籤。
相容性
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 % ;  
}
beforeafter是在選擇的標籤之前或者之後插入內容,一般用於清除浮動,但是對於IE6IE7是不可用的。

相容性
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


沒有留言: