first-child選擇器和last-child選擇器
first-child指定第一個(gè)元素。last-child指定最后一個(gè)子元素。
例如：
<!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>列表項(xiàng)目1</li>
<li>列表項(xiàng)目2</li>
<li>列表項(xiàng)目3</li>
<li>列表項(xiàng)目4</li>
<li>列表項(xiàng)目5</li></ul></body></html>
nth-child選擇器和nth-last-child選擇器
指定父元素中某個(gè)指定序號(hào)的子元素來(lái)指定樣式。指定方法如下所示：
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>列表項(xiàng)目1</li>
<li>列表項(xiàng)目2</li>
<li>列表項(xiàng)目3</li>
<li>列表項(xiàng)目4</li>
<li>列表項(xiàng)目5</li></ul></body></html>
對(duì)所有第奇數(shù)個(gè)子元素或第偶數(shù)個(gè)子元素使用樣式
使用方法如下：
nth-child(odd){//指定樣式}//所有正數(shù)下來(lái)的第偶數(shù)個(gè)子元素
<子元素>:nth-child(even){//指定樣式}//所有倒數(shù)上去的奇數(shù)個(gè)子元素
<子元素>:nth-last-child(odd){//指定樣式}//所有倒數(shù)上去的第偶數(shù)個(gè)子元素
<子元素>: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>列表項(xiàng)目1</li>
<li>列表項(xiàng)目2</li>
<li>列表項(xiàng)目3</li>
<li>列表項(xiàng)目4</li>
<li>列表項(xiàng)目5</li></ul></body></html>
選擇器nth-of-type和nth-last-of-type
nth-child在使用過(guò)程中會(huì)有問(wèn)題，問(wèn)題產(chǎn)生的原因是，nth-child選擇器在計(jì)算子元素是第奇數(shù)個(gè)元素還是第偶數(shù)個(gè)元素的時(shí)候，是連同父元素中的所有子元素一起計(jì)算的。CSS3中使用nth-of-type選擇器和nth-last-of-type選擇器可以避免這類問(wèn)題的發(fā)生，使用這兩個(gè)選擇器的時(shí)候，CSS3在計(jì)算子元素時(shí)第奇數(shù)個(gè)子元素還是偶數(shù)個(gè)子元素的時(shí)候，就只針對(duì)同類型的子元素進(jìn)行計(jì)算，使用方法如下：
h2:nth-of-type(odd){
background-color:yellow;
}h2:nth-of-type(even){
background-color:skyblue;
}
循環(huán)使用樣式
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;
}
這樣樣式會(huì)隔4循環(huán)樣式。奇數(shù)個(gè)和偶數(shù)個(gè)也可以改寫成下面方式：
//所有正數(shù)下來(lái)的第奇數(shù)個(gè)子元素
<子元素>:nth-child(2n+1){//指定樣式}//所有正數(shù)下來(lái)的第偶數(shù)個(gè)子元素
<子元素>:nth-child(2n+2){//指定樣式}//所有倒數(shù)上去的第奇數(shù)個(gè)子元素
<子元素>:nth-last-child(2n+1){//指定樣式}//所有倒數(shù)上去的第偶數(shù)個(gè)子元素
<子元素>:nth-last-child(2n+2){//指定樣式}
only-child選擇器
only-child選擇是指定當(dāng)某個(gè)元素中只有一個(gè)子元素時(shí)才使用的樣式。例如：
<!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>列表項(xiàng)目1</li></ul></body></html>
UI元素狀態(tài)偽類選擇器
UI元素狀態(tài)偽類選擇器的共同特征是：指定的樣式只有當(dāng)元素處于某種狀態(tài)下時(shí)才起作用，在默認(rèn)狀態(tài)下不起作用。在CSS3中，共有11種UI元素狀態(tài)偽類選擇器，分別是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選擇器用來(lái)指定當(dāng)鼠標(biāo)指針移動(dòng)到元素上面時(shí)元素所使用的樣式。
E:active選擇器用來(lái)指定元素被激活（鼠標(biāo)在元素上按下還沒(méi)有松開）時(shí)使用的樣式。
E:focus選擇器用來(lái)指定元素獲得光標(biāo)焦點(diǎn)時(shí)使用的樣式，主要在文本框控件獲得焦點(diǎn)并進(jìn)行文字輸入的時(shí)候使用。例子如下：
<!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>
http://www.cnblogs.com/hetaojs/p/6973211.html
延伸閱讀
- 學(xué)習(xí)、實(shí)踐。再學(xué)習(xí)，再實(shí)踐 2023-04-15
- 從0到0.5，堅(jiān)持學(xué)習(xí) 2022-09-08
- 來(lái)萬(wàn)碼學(xué)習(xí)，是我最正確的選擇 2022-09-07
- 學(xué)習(xí)與實(shí)踐 2022-06-24
- 學(xué)習(xí)——工作——再學(xué)習(xí) 2021-06-01
- 不斷學(xué)習(xí)，才能不斷進(jìn)步 2021-05-19
- 謝謝當(dāng)初的選擇 2020-06-11
- 選擇要趁早 2020-06-11
- 此生難忘的一次學(xué)習(xí) 2020-06-11
- 我的學(xué)習(xí)之路 2019-11-24
學(xué)習(xí)、實(shí)踐。再學(xué)習(xí)，再實(shí)踐