樣式表的選擇器

1.類選擇器

根據HTML標簽的class屬性選擇樣式應用的屬性

.類值{ … }

2.ID選擇器

根據HTML標簽的ID屬性選擇樣式應用的元素

#id值{ … }

3.標簽選擇器

根據HTML標簽選擇樣式應用的屬性

標簽名{ … }

4.子選擇器

.food>li{

border:1px solid red;

}

5.包含選擇器

.first span{color:red;}

6.通用選擇器

* {color:red;}

7.偽類選擇器

1、靜態偽類(只應用於超鏈接)

[註意]visited偽類只能設置字體顏色、邊框顏色、outline顏色的樣式

a:link{color: red;}　　設置超鏈接在未被訪問前的樣式。
 

a:visited{color: green;}　　設置超鏈接在其鏈接地址已被訪問過時的樣式

2、動態偽類(可應用於任何元素)

設置超鏈接在其鼠標懸停時的樣式。
a:hover{
　　cursor:pointer;
　　color:red;
}

設置超鏈接在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式。
a:active{
　　cursor:pointer
　　color:red;
}

擁有焦點
input:focus{ 　　　　
　color:red; 
}

3.UI元素偽類

[註意]input和:和enabled之間都不可以有空格

input:enabled{color: red}　　 可用狀態
 

input:disabled{color: red}　　不可用狀態

input:checked{color: red}　　選中狀態

4.結構偽類

[註意]n可以是整數(從1開始)，也可以是公式，也可以是關鍵字(even、odd)

.parent:first-child 父元素的第一個子元素,與nth-child(1)等同
.parent:last-child  父元素的最後一個子元素,與nth-last-child(1)等同
.parent:nth-child(n) 選擇父元素的第n個子元素

5.偽類的結合

[註意]與順序無關

a:hover:first-child{color: black;}

8.偽元素選擇器

　 1、:first-letter 設置首字母樣式,只能與塊級元素關聯;

p:first-letter {color: red;}    

　　2、:first-line 設置首行樣式,只能與塊級元素關聯；

p:first-line{color: red;}    

　　3、:before 在元素內容前面插入內容

　　默認這個偽元素是行內元素，繼承元素可繼承的屬性；所有元素都必須放在出現該偽元素的選擇器的最後面。若寫成 p:before em 就是不合法的

p:before{content:"text"}

　　4、:after 在元素內容後面插入內容

　　默認這個偽元素是行內元素，繼承元素可繼承的屬性

p:after{content:"text"}

9.屬性選擇器

屬性選擇器根據元素的屬性及屬性值來選擇元素

1、簡單屬性選擇器

a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
img[alt]{color: red;}
[class]{color: red;}

2、具體屬性選擇器

a[href="http://www.baidu.com"][title="baidu"] {color: red;}  

[id="tox"]{color: red;} 

3、部分屬性選擇器

[class ^="b"] 選擇class屬性值以"b"開頭的所有元素
[class $="b"] 選擇class屬性值以"b"結尾的所有元素
[class *="b"] 選擇class屬性值包含"b"的所有元素  
上面三個屬於正則匹配，是CSS3新增的屬性選擇器

CSS基礎語法(二) CSS的9種選擇器