選擇器—偽類選擇器
1、鏈接偽類
:link 指示作為超鏈接並指向一個未訪問的地址的錨
:visited 指示作為已訪問地址超鏈接的所有錨
可以對鏈接偽類進行顏色,樣式等屬性的設置。
1 a:link{ 2 color:blue; 3 text-decoration:line-through; 4 } 5 a:visited{ 6 color:red; 7 }
2、動態偽類
:focus 指示當前擁有輸入焦點的元素,也就是說,可以接受鍵盤輸入或者能以某種方式激活的元素
:hover 指示鼠標指針停留在哪個元素上
:active 指示被用戶輸入激活的元素,例如鼠標指針停留在一個超鏈接上,如果用戶點擊鼠標,就會激活這個超鏈接。
3、以上偽類用的最多的是在超鏈接的設置上,偽類的順序很重要,通常的為 link—visited—focus—hover—active。動態偽類可以應用到任何元素上。
4、選擇第一個子元素
可以使用靜態偽類 first—child來選擇第一個子元素
1 span:first-child{ 2 color:red; 3 } 4 li:first-child{ 5 color:red; 6 }7 p:first-child{ 8 color:red; 9 } 10 <p>第一個段落</p> 11 <p>第二個段落</p> 12 <ul> 13 <li>第一個序列</li> 14 <li>第<span>span</span>二個序<span>span7</span>列</li> 15 </ul> 16 <ul> 17<li>第三個序列</li> 18 <li>第四個序列</li> 19 </ul>
5、偽類組合
可以把偽類進行組合使用,但是要註意不要把互斥的偽類組合在一起。比如一個超鏈接不可能同時是未訪問和已訪問兩種狀態
a:link:hover{color:red;}
a:visited:hover{color:maroon;}
6、偽元素選擇器
設置首字母樣式: P:first-letter{color:red;}。為某個元素中的文字的首字母或第一個字使用樣式
設置第一行樣式: P:first-line{color:blue;}。為某個元素的第一行文字使用樣式
設置之前的樣式: p:before{content:"[ [ ] ]";}。在某個元素之前插入一些內容
設置之後的樣式: p:after{content:"[ [ ] ]";}。在某個元素之後插入一些內容
以上選擇器只能應用於標記或段落之類的塊級元素上,而不能用於超鏈接等的行內元素。在偽元素裏面使用屬性,有一定的限制,並不是所有的屬性都可以在偽元素選擇器裏面使用。
選擇器—偽類選擇器