css3第四篇，選擇器三(偽類選擇器一）
阿新 • • 發佈：2018-12-11
偽類選擇器一
語法 ：。指定選擇器特殊情況下的屬性以及屬性值
結構偽類選擇器
1.:nth-child:根據定義的標籤順序,來給指定的標籤新增樣式。先找到符合順序的標籤，再匹配標籤是否符合設定的型別。
| 選擇器 | 作用 |
|---|---|
| :first-child | 所有標籤中的第一個,並且要符合設定的標籤型別 |
| :last-child | 所有標籤中的最後一個,並且要符合設定的標籤型別 |
| :nth-child() | 符合指定順序的標籤.()當中可寫內容:一個數值,表示指定的順序;英文單詞odd奇數標籤even偶數標籤.公式:a*n +/- b,公式沒有固定的寫法,完全根據需求而定,a,b是根據需求自行設定的數字,n是css3系統規定的,從0開始的整數,將n賦值,是從0開始的整數,再根據公式計算出數值,按照數值給指定順序的符合設定的標籤新增樣式效果 |
| nth-last-child() | 與nth-child()的所有語法都相同,只是計算順序,是從最後一位開始,例如:nth-last-child(3) |
舉例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .ul1>li:first-child { color: blue; } .ul1>li:last-child { color: green; } .ul1>li:nth-child(4) { color: red; } </style> </head> <body> <ul class="ul1"> <li>北京1</li> <li>北京2</li> <li>北京3</li> <li>北京4</li> <li>北京5</li> <li>北京6</li> <li>北京7</li> <li>北京8</li> </ul> </body> </html>
舉例2：請看註釋。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 一個標籤是a標籤,與設定的型別符合,無法載入樣式效果 */ .div1>span:first-child { color: red; } /* 第一個標籤是a標籤,與設定型別一致,可以載入樣式效果 */ .div1>a:first-child { color: green; } /* 同理,最後一個標籤是p標籤,與設定型別不一致,沒法載入樣式效果 */ .div1>h6:last-child { color: blue; } /* 最後一個標籤是p標籤,與設定型別一致,可以載入樣式效果 */ .div1>p:last-child { color: blue; } /* 第五個標籤,是h1標籤,與設定型別一直,可以載入樣式效果 */ .div1>h1:nth-child(5) { color: yellow; } </style> </head> <body> <div class="div1"> <a href="#">百度1</a> <a href="#">百度2</a> <span>廣州1</span> <span>廣州2</span> <h1>重慶1</h1> <h2>重慶2</h2> <h3>重慶3</h3> <h4>重慶4</h4> <h5>重慶5</h5> <h6>重慶6</h6> <p>武漢</p> </div> </body> </html>
舉例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 按照設定的數字作為順序,查詢位置,再看該位置上的標籤,是否符合型別設定 */
/* .ul1>li:nth-child(2) { color: red; } */
/* 所有奇數標籤,並且要符合型別設定,載入css樣式 */
/* .ul1>li:nth-child(odd) { color: blue; } */
/* 所有的偶數標籤,並且要符合型別設定,可以載入css樣式效果 */
/* .ul1>li:nth-child(even) {
color: green;
} */
/* n是從0開始的數值,按照公式計算出相應的結果,結果就是寫入的數值,就是標籤的順序,再看該順序上的標籤是否符合設定型別 */
/* 需求:3,6,9,12...標籤改變顏色 */
/* .ul1>li:nth-child(3n) { color: pink; } */
/* n是從0開始的數值,2n+1,的計算結果 1,3,5,7,9.... 最終效果為奇數標籤新增效果 */
/* .ul1>li:nth-child(2n+1) { color: orange; } */
/* n是從0開始的數值,2n-1,的計算結果 -1,1,3,5,7,9.... 沒有沒有-1的標籤順序,沒有標籤會新增-1的樣式效果,最終效果為奇數標籤新增效果 */
/* .ul1>li:nth-child(2n-1) { color: orange; } */
/* 設定奇數標籤,並且是span的標籤新增樣式效果,第三個標籤是a標籤,符合型別設定,不會新增樣式效果 */
.div2>span:nth-child(odd) {
color: yellow;
}
</style>
</head>
<body>
<ul class="ul1">
<li>北京1</li>
<li>北京2</li>
<li>北京3</li>
<li>北京4</li>
<li>北京5</li>
<li>北京6</li>
<li>北京7</li>
<li>北京8</li>
<li>北京9</li>
<li>北京10</li>
<li>北京11</li>
<li>北京12</li>
<li>北京13</li>
<li>北京14</li>
<li>北京15</li>
<li>北京16</li>
</ul>
<div class="div2">
<span>北京1</span>
<span>北京2</span>
<a href="#">上海</a>
<span>北京3</span>
<span>北京4</span>
<span>北京5</span>
<span>北京6</span>
<span>北京7</span>
<span>北京8</span>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>舉例4：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 所有標籤中正數第二個標籤,並且要求標籤型別為li標籤 */
.ul1>li:nth-child(2) {
color: red;
}
/* 所有標籤中倒數第二個標籤,並且要求標籤型別為li標籤 */
.ul1>li:nth-last-child(2) {
color: blue;
}
</style>
</head>
<body>
<ul class="ul1">
<li>北京1</li>
<li>北京2</li>
<li>北京3</li>
<li>北京4</li>
<li>北京5</li>
<li>北京6</li>
<li>北京7</li>
<li>北京8</li>
<li>北京9</li>
<li>北京10</li>
<li>北京11</li>
<li>北京12</li>
<li>北京13</li>
</ul>
</body>
</html>舉例5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .div1>div:nth-child(1)
.div1選擇器標籤中,子級第一個標籤,該標籤還必須是div */
/* .div1>div:nth-child(1)>span:nth-child(1) .div1選擇器標籤中,子級第一個標籤,該標籤還必須是div,再找子級標籤,找第一個標籤,標籤還必須是span */
.div1>div:nth-child(1)>span:nth-child(1) {
color: green;
font-size: 20px;
}
.div1>div:nth-child(1)>span:nth-child(2) {
color: red;
font-size: 20px;
}
.div1>div:nth-child(1)>span:nth-child(3) {
color: gray;
font-size: 10px;
}
/* .div1>div:nth-child(2)
.div1選擇器標籤中,子級第二個標籤,該標籤還必須是div */
/* .div1>div:nth-child(2)>ul>li:nth-child(even) .div1選擇器標籤中,子級第二個標籤,該標籤還必須是div,子級的ul,ul中所有偶數標籤,並且型別必須是li */
.div1>div:nth-child(2)>ul>li:nth-child(even) {
background: green;
}
</style>
</head>
<body>
<div class="div1">
<div>
<span>你所在的地區</span>
<span>*</span>
<span>(必填,單選)</span>
</div>
</div>
<div class="div1">
<div>
<span>你的性別</span>
<span>*</span>
<span>(必填,單選)</span>
</div>
</div>
<div class="div1">
<div>
<span>你的年齡</span>
<span>*</span>
<span>(必填,單選)</span>
</div>
<div>
<ul>
<li>
<input type="radio" name="age">18歲以下
</li>
<li>
<input type="radio" name="age">18歲~25歲
</li>
<li>
<input type="radio" name="age">26歲~34歲
</li>
<li>
<input type="radio" name="age">35歲~44歲
</li>
<li>
<input type="radio" name="age">44歲以上
</li>
</ul>
</div>
</div>
</body>
</html>2:nth-of-type.先找到所有符合型別的標籤,再按照順序給指定位置的標籤新增樣式
| 選擇器 | 說明 |
|---|---|
| :first-of-type | 所有符合設定型別的標籤中的第一個 |
| :last-of-type | 所有符合設定型別的標籤中的最後一個 |
| :nth-of-type() | 符合指定順序的標籤,()當中可寫內容:一個數值表示指定的順序,英文單詞odd奇數標籤、even偶數標籤.公式a*n +/- b公式沒有固定的寫法,完全根據需求而定a,b是根據需求自行設定的數字n是css3系統規定的,從0開始的整數將n賦值,是從0開始的整數,再根據公式計算出數值,按照數值給指定順序的符合設定的標籤新增樣式效果 |
| nth-last-of-type() | 與nth-of-type()的所有語法都相同,只是計算順序,是從最後一位開始,例如:nth-last-of-type(3),所有符合設定型別的標籤中的倒數第三個標籤 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* child 先找第一個標籤,再要求符合設定型別 */
.div1>strong:first-child {
color: red;
}
/* 先找到所有符合型別的標籤,再按照設定的順序給標籤新增樣式 */
/* first-of-type,所有的strong中的第一個strong標籤 */
/* .div1>strong:first-of-type { color: yellow; } */
/* last-of-type,所有的strong中的最後一個strong標籤 */
/* .div1>strong:last-of-type {
color: blue;
} */
/* nth-of-type(3)找到所有標籤中符合設定順序的標籤,新增樣式 */
/* .div1>strong:nth-of-type(3) {
color: pink;
} */
/* .div1>strong:nth-of-type(even) { color: orange; } */
/*nth-last-of-type 找到符合順序的的標籤,是從所有符合型別的標籤中倒數 */
/* .div1>strong:nth-last-of-type(2) { color: green; } */
</style>
</head>
<body>
<div class="div1">
<a href="#">新浪</a>
<a href="#">搜狐</a>
<strong>北京</strong>
<a href="#">搜狐</a>
<strong>上海</strong>
<a href="#">搜狐</a>
<strong>重慶</strong>
<a href="#">搜狐</a>
<strong>天津</strong>
<strong>廣州</strong>
<em>武漢</em>
<em>長沙</em>
</div>
</body>
</html>總結:child先數數,先找順序,再看當前位置標籤是否符合設定標籤型別;of-type先找到所有的符合型別的標籤,不符合型別的標籤不參與,再找順序符合設定順序的標籤.