014_CSS伪类选择器
1. 偽類選擇器是通過單冒號(:)和特定的具有某種含義的單詞來確定所選元素。
2. 所謂偽類選擇器, 是相對于"類選擇器"來說的。偽類選擇器類似于添加類, 所以可以是多個。
3. 偽類的語法:
selector : pseudo-class {property: value; }4. 錨偽類
4.1. 在支持CSS的瀏覽器中, 鏈接的不同狀態可以使用不同的方式顯示, 這些狀態包括: 活動狀態(按下鼠標, 可以一直按下鼠標), 已被訪問狀態, 未被訪問狀態和鼠標懸停狀態。
/* 未訪問的鏈接 */ a:link {color: #FF0000; } /* 已訪問的鏈接 */ a:visited {color: #00FF00; } /* 鼠標移動到鏈接上 */ a:hover {color: #FF00FF; } /* 選定的鏈接 */ a:active {color: #0000FF; }4.2. 在CSS定義中, a:hover必須被置于a:link和a:visited之后, 才是有效的。
4.3. 在CSS定義中, a:active必須被置于a:hover之后, 才是有效的。
4.4. 偽類名稱對大小寫不敏感。
4.5. 例子
4.5.1.?代碼
<!DOCTYPE html> <html><head><title>錨偽類</title><meta charset="utf-8" /><style type="text/css">a:link {color: #FF0000;}a:visited {color: #00FF00;}a:hover {color: #FF00FF;}a:active {color: #0000FF;}</style></head><body><p><b><a href="http://www.baidu.com" target="_blank">這是一個鏈接。</a></b></p><p><b>注釋：</b>在 CSS 定義中，a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！</p><p><b>注釋：</b>在 CSS 定義中，a:active 必須位于 a:hover 之后，這樣才能生效！</p></body> </html>4.5.2.?效果圖
5. :first-child偽類
5.1. :first-child偽類來選擇做為某元素的第一個子元素(必須是第一個子元素)的元素。
5.2. 這個特定偽類很容易遭到誤解, 所以有必要舉例來說明?？紤]以下標記:
<div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p> </div>5.2.1. 在上面的例子中, 作為第一個元素的元素包括第一個p、第一個li和em和i元素。
5.2.2. 給定以下規則:
p:first-child {font-weight: bold; } li:first-child {text-transform: uppercase; }5.2.3. 第一個規則將作為某元素第一個子元素的所有p元素設置為粗體。第二個規則將作為某個元素(在html中, 這肯定是ol或ul元素)第一個子元素的所有li元素變成大寫。
5.3. 最常見的錯誤是認為p:first-child之類的選擇器會選擇p元素的第一個子元素。
5.4. 必須聲明, 這樣:first-child才能在IE中生效。
5.5. 例子
5.5.1.?代碼
<!DOCTYPE html> <html><head><title>first-child偽類</title><meta charset="utf-8" /><style type="text/css">p:first-child {font-weight: bold;}li:first-child {text-transform: uppercase;}</style></head><body><div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p></div></body> </html>5.5.2.?效果圖
6. :last-child偽類
6.1. :last-child選擇器匹配屬于其父元素的最后一個子元素(必須是最后一個子元素)的元素。
6.2. 例子
6.2.1. 代碼
<!DOCTYPE html> <html><head><title>last-child偽類</title><meta charset="utf-8" /><style type="text/css">p:last-child {font-weight: bold;}li:last-child {text-transform: uppercase;}</style></head><body><div><p>These are the necessary steps:</p><ul><li>Intert Key</li><li>Turn key <em>clockwise</em></li><li>Push accelerator</li></ul><p>Do <i>not</i> push the brake at the same time as the accelerator.</p></div></body> </html>6.2.2.?效果圖
7. :nth-child(n)偽類
7.1. :nth-child(n)選擇器匹配屬于其父元素的第n個子元素(必須是第n個子元素)的元素, 不論元素的類型。
7.2. n可以是數字、關鍵詞或公式。
7.3. odd和even是可用于匹配下標是奇數或偶數的子元素的關鍵詞(第一個子元素的下標是: 1)。
7.4. 例子
7.4.1. 代碼
<!DOCTYPE html> <html><head><title>nth-child偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-child(odd) {background: #ff0000;}p:nth-child(even) {background: #0000ff;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>7.4.2.?效果圖
8. :nth-last-child(n)偽類
8.1. :nth-last-child(n)選擇器匹配屬于其父元素的第n個子元素(必須是第n個子元素)的元素, 不論元素的類型, 從最后一個子元素開始計數。
8.2. 例子
8.2.1. 代碼
<!DOCTYPE html> <html><head><title>nth-last-child偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-last-child(5) {background: #0000ff;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>8.2.2.?效果圖
9. :nth-of-type(n)偽類
9.1. :nth-of-type(n)選擇屬于父元素的特定類型的第n個子元素(按照類型匹配, 不一定是父元素的第n個元素, 可能大于等于n)的元素。
9.2. 例子
9.2.1. 代碼
<!DOCTYPE html> <html><head><title>nth-of-type偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-child(2) {color: #ffff00;}p:nth-of-type(2) {background: #ff0000;}</style></head><!-- p:nth-child(2)屬于其父元素的第二個子元素的每個p。p:nth-of-type(2)屬于其父元素的第二個p元素(按照類型p匹配, 不一定是父元素的第二個元素)的每個p。 --><body><p>第一個段落。</p><!-- <p>第二個段落。</p> --><b>第二個段落, 但是p給換成了b。</b><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>9.2.2.?效果圖
10. nth-last-of-type(n)偽類
10.1. nth-last-of-type(n)選擇屬于父元素的特定類型的第n個子元素(按照類型匹配, 不一定是父元素的第n個元素, 可能大于等于n)的元素, 從最后一個子元素開始計數。
10.2. 例子
10.2.1. 代碼
<!DOCTYPE html> <html><head><title>nth-last-of-type偽元素</title><meta charset="utf-8" /><style type="text/css">p:nth-last-of-type(2) {background: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><b>第四個段落, 但是p給換成了b。</b><p>第五個段落。</p></body> </html>10.2.2.?效果圖
11. :first-of-type偽類
11.1. :first-of-type選擇屬于其父元素的特定類型的首個子元素(按照類型匹配, 不一定是父元素的第一個元素)的元素。
11.2. 例子
11.2.1. 代碼
<!DOCTYPE html> <html><head><title>first-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:first-child {color: #ffff00;}p:first-of-type {background: #ff0000;}</style></head><body><!-- <p>第一個段落。</p> --><b>第一個段落, 但是p給換成了b。</b><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><p>第五個段落。</p></body> </html>11.2.2.?效果圖
12. :last-of-type偽類
12.1. :last-of-type選擇屬于其父元素的特定類型的最后一個子元素(按照類型匹配, 不一定是父元素的第最后一個元素)的元素。
12.2. 例子
12.2.1. 代碼
<!DOCTYPE html> <html><head><title>last-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:last-child {color: #ffff00;}p:last-of-type {background: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p>第四個段落。</p><b>第五個段落, 但是p給換成了b。</b></body> </html>12.2.2.?效果圖
13. :only-child偽類
13.1. only-child選擇屬于其父元素的唯一子元素的元素(父元素只能有一個元素)。
14. :only-of-type偽類
14.1. only-of-type選擇屬于其父元素的特定類型的唯一子元素的元素(父元素可以有多個元素, 但是該類型只能有一個)。
14.2. 例子
14.2.1. 代碼
<!DOCTYPE html> <html><head><title>only-child和only-of-type偽類</title><meta charset="utf-8" /><style type="text/css">p:only-child {color: #ffff00;}p:only-of-type {background: #ff0000;}</style></head><body>body只有一個p元素, p:only-child和p:only-of-type都起作用。<!-- body有一個p元素和一個div元素, p:only-child不起作用, 而p:only-of-type起作用。 --><p>第一個段落。</p><!-- <div>第一個div</div> --></body> </html>14.2.2.?效果圖
15. :lang(en)偽類
15.1. :lang(en)偽類使你有能力為不同的語言定義特殊的規則。
15.2. 例子
15.2.1. 代碼
<!DOCTYPE html> <html><head><title>:lang 偽類</title><meta charset="utf-8" /><style type="text/css">/*quotes屬性設置嵌套引用(embedded quotation)的引號類型。*/q:lang(zh) {quotes: '"' '"';}q:lang(en) {quotes: '"' '"' "'" "'";}</style></head><body><p>文字開始<q lang="zh">段落中的引用的文字</q>文字結束</p><p><q lang="en">This is a <q lang="en">big</q> quote</q></p></body> </html>15.2.2.?效果圖
16. :focus偽類
16.1. :focus選擇器用于選取獲得焦點的元素。
16.2. 例子
16.2.1. 代碼
<!DOCTYPE html> <html><head><title>focus偽類</title><meta charset="utf-8" /><style type="text/css">input:focus {background-color: yellow;}</style></head><body><p>在文本框中點擊, 您會看到黃色的背景:</p><form>First name: <input type="text" name="firstname" /><br>Last name: <input type="text" name="lastname" /></form></body> </html>16.2.2.?效果圖
17. :root偽類
17.1. :root選擇器匹配文檔根元素。
17.2. 在html中, 根元素始終是html元素。
18. :empty偽類
18.1. :empty選擇器匹配沒有子元素(包括文本節點, 也就是說該元素既沒有子元素也不能包含文本)的元素。
18.2. 例子
18.2.1. 代碼
<!DOCTYPE html> <html><head><title>root和empty偽類</title><meta charset="utf-8" /><style type="text/css">:root {color: #ff00ff;}p {width: 300px;height: 30px;}p:empty {background-color: #ff0000;}</style></head><body><p>第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p></p></body> </html>18.2.2.?效果圖
19. :not偽類
19.1. :not(selector)選擇器匹配非指定元素/選擇器的元素。
19.2. 例子
19.2.1. 代碼
<!DOCTYPE html> <html><head><title>not偽類</title><meta charset="utf-8" /><style type="text/css">p {color: #ff0000;}:not(.myP) {color: #ff00ff;}</style></head><body><p class="myP">第一個段落。</p><p>第二個段落。</p><p>第三個段落。</p><p class="myP">第四個段落。</p></body> </html>19.2.2.?效果圖
20. :target偽類
20.1. :target選擇器可用于選取當前活動的目標元素。
20.2. URL帶有后面跟有錨名稱, 指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。
20.3. 例子
20.3.1. 代碼
<!DOCTYPE html> <html><head><title>target偽類</title><meta charset="utf-8" /><style type="text/css">#news1, #news2 {width: 300px;height: 200px;}:target {border: 2px solid #D4D4D4;background-color: #e5eecc;}</style></head><body><h1>點擊下面的鏈接, :target選擇器會突出顯示當前活動的html錨。</h1><p><a href = "#news1">跳轉至內容 1</a></p><p><a href = "#news2">跳轉至內容 2</a></p><p id = "news1"><b>內容 1...</b></p><p id = "news2"><b>內容 2...</b></p><p><b>注釋: </b>Internet Explorer 8以及更早的版本不支持:target選擇器。</p></body> </html>20.3.2.?效果圖
21. enabled和disabled偽類
21.1. :enabled選擇器匹配每個已啟用的元素(大多用在表單元素上)。
21.2. :disabled選擇器匹配每個被禁用的元素(大多用在表單元素上)。
21.3. 例子
21.3.1. 代碼
<!DOCTYPE html> <html><head><title>enabled和disabled偽類</title><meta charset="utf-8" /><style type="text/css">input[type="text"]:enabled {background-color: #ffff00;}input[type="text"]:disabled {background-color: #ff0000;}</style></head><body><form>First name: <input type="text" value="zhang" /><br>Last name: <input type="text" value="san" /><br>Country: <input type="text" disabled="disabled" value="China" /><br></form></body> </html>21.3.2.?效果圖
22. 偽類列表
總結
以上是生活随笔為你收集整理的014_CSS伪类选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 012_CSS相邻兄弟选择器
- 下一篇： 015_CSS伪元素选择器