CSS3新增選擇器示例-偽類選擇器
一. 偽類選擇器介紹
1.1 首先了解下什麼是類選擇器
類選擇器語法：.類名
也就是標籤的class屬性值
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>css3中選擇器示例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*通過標籤選擇器給div設定寬、高，文字對其方式*/
div {
width 執行結果
1.2 偽類選擇器
① 上面簡單的介紹了類選擇器，那麼偽類選擇器與類選擇器之間，有什麼關係呢？ 答：沒什麼關係。 ② 為什麼說沒關係呢？ 首先,類選擇器的語法是.類名, 類名是使用者自定義的，類選擇器定義的樣式， 我們在標籤的class屬性中可以直接通過定義的類名直接使用。 偽類選擇器的語法是固定的，例如：E:hover （E代表選擇器，可以是類選擇器，標籤選擇器)
二. CSS3中新增的偽類選擇器示例介紹
1. E:first-child
獲取某元素(E)的父元素的第一個子元素
例1：
<!DOCTYPE html>
<html>
<head>
<title>示例程式碼1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*② 通過li標籤獲取該元素的父元素下的第一個子元素，將該元素的內容的文字顏色，設定為紅色*/
li:first-child {
color: red;
}
</style>
</head>
<body>
<!--① 定義一個無序列表-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>執行結果
例2：
<!DOCTYPE html>
<html>
<head>
<title>示例程式碼2- 通過類選擇器獲取</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*② 通過類名選擇器找到指定元素，獲取該指定元素的父元素下的第一個子元素，將該元素的內容的文字顏色，設定為紅色*/
.li1:first-child {
color: red;
}
</style>
</head>
<body>
<!--① 定義一個無序列表-->
<ul>
<li>1</li>
<li class="li1">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>執行結果
示例程式碼2失敗原因
要設定的第一個子元素，沒有沒有設定class=’li1’
如果是指定標籤選擇器，那麼指定的標籤也應該是與標籤選擇器的標籤名相同
例3
<!DOCTYPE html>
<html>
<head>
<title>示例程式碼3- 通過類選擇器獲取</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*找到h2標籤的父標籤div下的第一個元素*/
h2:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>第一段文字</p>
<p>第二段文字</p>
<p>第三段文字</p>
<p>第四段文字</p>
<h2>第五段文字</h2>
</div>
</body>
</html>
執行結果
失敗原因
例3中，我們是通過h2標籤找到的父標籤下的第一個元素。
① 如果是通過標籤選擇器查詢，那麼指定的標籤要與查詢的標籤，標籤名要相同
② 如果是類選擇器，那麼指定的要與查詢的要有相同的類名
改正後執行結果
2. E:last-child
獲取最後一個子元素，與E:first-child用法相同。
3. E:nth-child(n) 用法
獲取第 n 個子元素
例1
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*找到ul標籤下的li標籤的父元素下的第七個子元素(有點繞口)*/
ul>li:nth-child(4) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一個子元素</li>
<li>第二個子元素</li>
<li>第三個子元素</li>
<li>第四個子元素</li>
<li>第五個子元素</li>
<li>第六個子元素</li>
<li>第七個子元素</li>
<li>第八個子元素</li>
</ul>
</body>
</html>
例2：
如果是n 值為 小於 1 或 超出指定元素的兄弟元素個數，會出現什麼狀況？
例3：
總結：
從上面三個例子可以看出
① n 是從 1 開始計算的，小於 1 或 大於兄弟元素個數，都不會生效
② E 與 選中的第 n 個元素，如果 E 是 標籤，那麼 n 所指向的元素要與 E 是相同的標籤
4. E:nth-child(an + b) 用法
nth-child(2n - 1) 與 nth-child(n) 中 n 所表示的意義不同
nth-child(n) 中的 n 表示的是 第幾個元素，值從 1 開始
nth-child(an + b) 中的 n 代表 從 0 開始，依次遞增的自然數
0, 1, 2, 3, 4….
通過下面的例子來具體說明
例1
給無序列表下的奇數個子元素的字型顏色設定為紅色
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>將無序列表的所有偶數為子元素字型顏色設定為紅色</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
li:nth-child(2n - 1) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一個元素</li>
<li>第二個元素</li>
<li>第三個元素</li>
<li>第四個元素</li>
<li>第五個元素</li>
<li>第六個元素</li>
<li>第七個元素</li>
<li>第八個元素</li>
</ul>
</body>
</html>
執行結果
總結：
上例的nth-child(2n -1)
可以理解成一個for迴圈
for(var n = 0; ; n++) {
var w = 2n - 1;
if(w > 8) { // 8 就是li的個數
break;
}else {
nth-child(w);
}
}
注意： 當a的值為正整數是，2n - 1 的最大值不能超過li的個數也就是 8
第一次： n = 0 2n-1=-1 小於8成立 執行nth-child(-1) -1 < 1 執行無效果
第二次： n = 1 2n-1= 1 小於8成立 執行nth-child(1) 將第一個元素文字顏色設定為紅色
....
第六次： n = 5 2n-1= 9 大於8 停止迴圈
此時，頁面上顏色改變的就只有第1,3,5,7個元素例2
給無序列表前五個元素的文字顏色設定為紅色
示例程式碼
<!DOCTYPE html>
<html>
<head>
<title>給無序列表的前五個元素文字顏色設定為紅色</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*
a = -2 為負數，取開最小值， an + b 的最小值不能小於 1
第一次： n = 0 -1*0 + 5 = 5 5 > 1 執行nth-child(5)
第二次: n = 1 -1*1 + 5 = 4 4 > 1 執行nth-child(4)
第三次： n = 2 -1*2 + 5 = 3 3 > 1 執行nth-child(3)
第四次： n = 3 -1*3 + 5 = 2 2 > 1 執行nth-child(2)
第四次： n = 4 -1*4 + 5 = 1 1 = 1 執行nth-child(1)
第四次： n = 5 -1*4 + 5 = 0 0 < 1 結束，停止執行
*/
li:nth-child(-1n + 5) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一個元素</li>
<li>第二個元素</li>
<li>第三個元素</li>
<li>第四個元素</li>
<li>第五個元素</li>
<li>第六個元素</li>
<li>第七個元素</li>
<li>第八個元素</li>
</ul>
</body>
</html>執行結果
注意：nth-child(an + b) 的寫法是固定的，順序不能顛倒，如寫成如下情況
以上三例總結
① nth-child(an + b) 的寫法是固定的，不能顛倒，寫成nth-child(b + an)無效
② 當a 為正數時，an + b 的最大值為所有子元素的個數，超過該值n 就停止遞增
③ 當a 為負數時， an + b 的最大值，不能小於 1, 小於1 ，n 停止遞增
5. E:nth-child(even)
選中所有的偶數元素
6.nth-child(odd)
選中所有的奇數元素
