CSS3學習系列之選擇器（二）
阿新 • • 發佈：2017-06-09
計算 選擇器 sky :focus ddr gree for 指定元素 學習
- first-child選擇器和last-child選擇器
first-child指定第一個元素。last-child指定最後一個子元素。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first-child選擇器與last-child選擇器使用示例</title> <style> li:first-child{ background-color: yellow; } li:last-child{ background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表項目1</li> <li>列表項目2</li> <li>列表項目3</li> <li>列表項目4</li> <li>列表項目5</li> </ul> </body> </html>
- nth-child選擇器和nth-last-child選擇器
指定父元素中某個指定序號的子元素來指定樣式。指定方法如下所示：
nth-child(n){ //指定樣式 } <子元素>:nth-last-child(n){ //指定樣式 }
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nth-child選擇器與nth-last-child選擇器使用示例</title> <style> li:nth-child(2){ background-color: yellow; } li:nth-last-child(2){ background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表項目1</li> <li>列表項目2</li> <li>列表項目3</li> <li>列表項目4</li> <li>列表項目5</li> </ul> </body> </html>
- 對所有第奇數個子元素或第偶數個子元素使用樣式
使用方法如下：
nth-child(odd){ //指定樣式 } //所有正數下來的第偶數個子元素 <子元素>:nth-child(even){ //指定樣式 } //所有倒數上去的奇數個子元素 <子元素>:nth-last-child(odd){ //指定樣式 } //所有倒數上去的第偶數個子元素 <子元素>:nth-last-child(even){ //指定樣式 }
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nth-child選擇器與nth-last-child選擇器使用示例</title> <style> li:nth-child(odd){ background-color: yellow; } li:nth-child(even){ background-color: skyblue; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表項目1</li> <li>列表項目2</li> <li>列表項目3</li> <li>列表項目4</li> <li>列表項目5</li> </ul> </body> </html>
- 選擇器nth-of-type和nth-last-of-type
nth-child在使用過程中會有問題，問題產生的原因是，nth-child選擇器在計算子元素是第奇數個元素還是第偶數個元素的時候，是連同父元素中的所有子元素一起計算的。CSS3中使用nth-of-type選擇器和nth-last-of-type選擇器可以避免這類問題的發生，使用這兩個選擇器的時候，CSS3在計算子元素時第奇數個子元素還是偶數個子元素的時候，就只針對同類型的子元素進行計算，使用方法如下：
h2:nth-of-type(odd){ background-color:yellow; } h2:nth-of-type(even){ background-color:skyblue; }
- 循環使用樣式
li:nth-child(4n+1){ background-color:yellow } li:nth-child(4n+2){ background-color:limegreen; } li:nth-child(4n+3){ background-color:red; } li:nth-child(4n+4){ background-color:white; }
這樣樣式會隔4循環樣式。奇數個和偶數個也可以改寫成下面方式：
//所有正數下來的第奇數個子元素 <子元素>:nth-child(2n+1){ //指定樣式 } //所有正數下來的第偶數個子元素 <子元素>:nth-child(2n+2){ //指定樣式 } //所有倒數上去的第奇數個子元素 <子元素>:nth-last-child(2n+1){ //指定樣式 } //所有倒數上去的第偶數個子元素 <子元素>:nth-last-child(2n+2){ //指定樣式 }
- only-child選擇器
only-child選擇是指定當某個元素中只有一個子元素時才使用的樣式。例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nth-child選擇器與nth-last-child選擇器使用示例</title> <style> li:only-child{ background-color: yellow; } </style> </head> <body> <h2>列表A</h2> <ul> <li>列表項目1</li> </ul> </body> </html>
- UI元素狀態偽類選擇器
UI元素狀態偽類選擇器的共同特征是：指定的樣式只有當元素處於某種狀態下時才起作用，在默認狀態下不起作用。在CSS3中，共有11種UI元素狀態偽類選擇器，分別是E:hover、E:active、E :focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。
- 選擇器：E:hover、E:active和E:focus
E:hover選擇器用來指定當鼠標指針移動到元素上面時元素所使用的樣式。
E:active選擇器用來指定元素被激活（鼠標在元素上按下還沒有松開）時使用的樣式。
E:focus選擇器用來指定元素獲得光標焦點時使用的樣式，主要在文本框控件獲得焦點並進行文字輸入的時候使用。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>E:hover選擇器、E:active選擇器與E:focus選擇器使用示例</title> <style> input[type="text"]:hover { background-color: greenyellow; } input[type="text"]:focus { background-color: skyblue; } input[type="text"]:active{ background-color: yellow; } </style> </head> <body> <form> <p>姓名：<input type="text" name="name"></p> <p>地址：<input type="text" name="address"></p> </form> </body> </html>
CSS3學習系列之選擇器（二）