1、常用選擇器
常用選擇器用於查找某一類別的元素,比如段落或者標題。
例:p{font-size:14px;}表示選擇所有的段落元素;
2、後代選擇器
後代選擇器用於查找特定元素或元素組的後代,後代選擇器由兩個選擇器之間的空格表示。
例: div p{font-size:14px;}表示選擇所有div元素裏的p元素。
3、ID選擇器
用於查找指定id的元素,id選擇器以#開始。
例:#container{border:1px solid red;}
4、類選擇器
用於查找指定類名的元素,以"."開始。
例:.container{border:1px solid red;}
5、僞類選擇器
有時候我們需要根據除文檔結構以外的其它條件對元素應用樣式,比如表單元素或鏈接的狀態,這個時候就需要僞類選擇器。
例:a:link{color:red;}
a:visited{color:green;}
a:hover,a:focus,a:active{color:yellow;}
input:focus{border:1px solid red;}
:link和:visited這種的被稱爲鏈接僞類,:hover,:focus,:active這種的被稱爲動態僞類,因爲需要在元素上做一些操作纔會觸發。
注意一點,ie6只注意:active和:hover選擇器,會忽略:focus;
ie7支持:hover,會忽略:active,:focus;
6、通用選擇器
通用選擇器即使用通配符進行選擇,雖然功能很強大,但是很少使用,通用選擇器使用*表示。
例:*{margin:0px;padding:0px;}
7、子選擇器
子選擇器和後代選擇器都是選擇元素的後代,不過區別在於子選擇器只選擇直屬於元素的後代;後代選擇器只會選擇元素的所有後代(無論是不是直屬)。
/*子選擇器會選擇li1到li5,嵌套的li不會選擇*/
.t>li{border:1px solid red;
/*後代選擇器選擇.t中所有的li元素*/
.t li{background-color:green;}
<ul class="t"> <li id="li1">1</li> <li id="li2">1</li> <li id="li3">1</li> <li id="li4">1</li> <li id="li5"> <ul> <li>11</li> <li>12</li> <li>13</li> <li>14</li> </ul> </li>
</ul>
注意:此選擇器IE6不支持;
8、相鄰同胞選擇器
用於定位同一個父元素下某個元素之後的元素。
/*將選擇h2後的第一個p元素*/
h2 + p{background-color:red;}
<h2>This is Title</h2> <p>this is p</p>
<p>myfsdfsdfsd</p>
注意:此選擇器IE6不支持;
9、屬性選擇器
用於選擇元素中包含某屬性或屬性爲特定值的元素選擇。
例:input[type="text"],input[type="button"],我們可以使用屬性選擇器爲不同的表單元素設置不同的樣式。
注意:此選擇器IE6不支持。
參考書籍:高級web標準解決方案(第2版)