收藏
天蓬老師批改狀態(tài)：合格
老師批語：非常直觀 , 圖文并茂, 一看就明白
總結(jié)：在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素。CSS 選擇器主要有簡(jiǎn)單選擇器、上下文選擇器、偽類選擇器。下面主要介紹 CSS 中各類選擇器的屬性及應(yīng)用。
| 選擇器 | 描述 | 舉例 |
|---|---|---|
| 元素選擇器 | 根據(jù)元素標(biāo)簽名稱進(jìn)行匹配 | div {...} |
| 群組選擇器 | 同時(shí)選擇多個(gè)不同類型的元素 | h1,h2,h3{...} |
| 通配選擇器 | 選擇全部元素,不區(qū)分類型 | * {...} |
| 屬性選擇器 | 根據(jù)元素屬性進(jìn)行匹配 | *[...] |
| 類選擇器 | 根據(jù)元素 class 屬性進(jìn)行匹配 | *.active {...} |
| id 選擇器 | 根據(jù)元素 id 屬性進(jìn)行匹配 | *#top {...} |
以上 6 種,其實(shí)可分為二類: 元素選擇器和屬性選擇器, 其它的只是二者的特例。
元素是使用標(biāo)簽和屬性進(jìn)行描述，所以使用標(biāo)簽和屬性來選擇元素非常自然直觀。
最常用的是: 元素選擇器, 類選擇器, id 選擇器。
當(dāng) class，id 選擇器不限定被修改的元素類型時(shí), 星號(hào)”*“可以省略。
各類選擇器的實(shí)例演示：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>簡(jiǎn)單選擇器</title> <style> /* 群組選擇器 */ h2, h3, h4 { color: red; } .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 類選擇器 */ .item { font-size: 2rem; background-color: cadetblue; display: flex; justify-content: center; align-items: center; } /* 元素選擇器 */ body { background-color: lightblue; } /* 多個(gè)類選擇器 */ .item.center { background-color: lightgreen; } /* id選擇器 */ /* id，class可以添加到任何元素上，前面的元素限定符默認(rèn)是“*”，當(dāng) class，id 選擇器不限定被修改的元素類型時(shí), 星號(hào)"`*`"可以省略 */ /* *#first{} 通配選擇器 */ #first { background-color: lightcoral; } /* id前加標(biāo)簽，結(jié)果無變化 */ div#first { background-color: lightcoral; } /* class權(quán)重大于標(biāo)簽 */ .item#first { background-color: coral; } /* id權(quán)重大于class */ #first.item { background-color: rgb(255, 80, 246); } /* 優(yōu)先級(jí)：標(biāo)簽 < class屬性 < id屬性 */ /* 屬性選擇器 */ .item[title="hello"] { /* hello可不加引號(hào)，如果是兩個(gè)以上單詞必須加引號(hào)，如：title="hello world" */ /* 如果只有一個(gè)元素有title屬性，“hello”可以省略，如：.item[title] */ background-color: rgb(253, 240, 56); } </style> </head> <body> <h2>簡(jiǎn)單選擇器</h2> <h3>簡(jiǎn)單選擇器</h3> <h4>簡(jiǎn)單選擇器</h4> <!-- 使用九宮格來演示簡(jiǎn)單選擇器 --> <div class="container"> <div class="item" id="first">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item" title="hello">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body></html>實(shí)例效果圖：
html 文檔看上去就像一顆倒置的”樹”，所以是有層級(jí)結(jié)構(gòu)的。每一個(gè)元素在文檔中都有自己的位置，即上下文關(guān)系。完全可以根據(jù)元素的上下文關(guān)系,來獲取到它們。
| 角色 | 描述 |
|---|---|
| 祖先元素 | 擁有子元素、孫元素等所有層級(jí)的后代元素 |
| 父級(jí)元素 | 僅擁有子元素層級(jí)的元素 |
| 后代元素 | 與其它層級(jí)元素一起擁有共同祖先元素 |
| 子元素 | 與其它同級(jí)元素一起擁有共同父級(jí)元素 |
實(shí)例：
<div> <!-- div為祖先元素 --> <p>...<span>...</span></p> <!-- p為span的父級(jí)元素，span為子元素，p、span都為后代元素 --> <table> <!-- p、table為div的子元素 --></div>
| 選擇器 | 操作符 | 描述 | 舉例 |
|---|---|---|---|
| 后代選擇器 | 空格 | 選擇當(dāng)前元素的所有后代元素 | div p, body * |
| 父子選擇器 | > | 選擇當(dāng)前元素的所有子元素 | div > h2 |
| 同級(jí)相鄰選擇器 | + | 選擇擁有共同父級(jí)且相鄰的元素 | li.red + li |
| 同級(jí)所有選擇器 | ~ | 選擇擁有共同父級(jí)的后續(xù)所有元素 | li.red ~ li |
上下文選擇器的實(shí)例演示：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 類選擇器 */ .item { font-size: 2rem; color: azure; background-color: cadetblue; display: flex; justify-content: center; align-items: center; } /* 元素選擇器 */ body { background-color: lightblue; } /* 后代選擇器 */ .container div { border: 3px solid coral; } /* 父子選擇器，只有外層的div受影響 */ body > div { border: 10px solid green; } /* body div.container { border: 3px solid green; } 指定container，用后代選擇器模擬父子選擇器 */ /* 同級(jí)相鄰選擇器 */ /* 選擇與第五個(gè)相鄰的（即后面的）一個(gè)元素 */ .item.center + .item { background-color: cyan; } /* 同級(jí)所有選擇器 */ /* 選擇與第五個(gè)后面有共同父級(jí)的所有兄弟元素 */ .item.center ~ .item { background-color: cyan; } </style> </head> <body> <h2>上下文選擇器</h2> <!-- 使用九宮格來演示上下文選擇器 --> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body></html>實(shí)例效果圖：
學(xué)習(xí)之前,先分析上下文選擇器的局限性，例如選擇同一個(gè)父級(jí)下的第二個(gè)子元素，就沒那么簡(jiǎn)單。而偽類就正好彌補(bǔ)了上下文選擇器的短板, 所以偽類，大多數(shù)是基于文檔中元素結(jié)構(gòu)的。
偽: 本意是假的、不存在的, 這里是特指, 不需要在元素上添加額外的屬性來獲取元素。
類: 暗指?jìng)晤惖募?jí)別, 仍然是屬于”class”級(jí)別, 仍然屬于屬性選擇器范疇,級(jí)別高于元素選擇器。
偽類的應(yīng)用場(chǎng)景:
結(jié)構(gòu)偽類——根據(jù)子元素的位置特征進(jìn)行選擇
表單偽類——根據(jù)表單控件狀態(tài)特征進(jìn)行選擇
不分組匹配
| 選擇器 | 描述 | 舉例 |
|---|---|---|
:first-child | 匹配第一個(gè)子元素 | div :first-child |
:last-child | 匹配最后一個(gè)子元素 | div :last-child |
:only-child | 選擇元素的唯一子元素 | div :only-child |
:nth-child(n) | 匹配任意位置的子元素 | div :nth-child(n) |
:nth-last-child(n) | 匹配倒數(shù)任意位置的子元素 | div :nth-last-child(n) |
實(shí)例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 類選擇器 */ .item { font-size: 2rem; color: azure; background-color: cadetblue; display: flex; justify-content: center; align-items: center; } /* 偽類選擇器，:first-child 匹配第一個(gè)單元格 */ .container > :first-child { /* .container > .item:first-child ，.item可省略 */ /* :first-child body、兩個(gè)div都包括 */ /* * :first-child 、 * :first-child 效果一樣，兩個(gè)div都包括*/ background-color: burlywood; } /* :last-child匹配最后一個(gè) */ .container > :last-child { background-color: crimson; } /* :nth-child(n) 匹配任何一個(gè)，索引從1開始計(jì)算 */ .container > :nth-child(3) { background-color: chartreuse; } /* :nth-child(n) n 支持表達(dá)式 */ /* :nth-child(2n) 匹配偶數(shù)，n在表達(dá)式中從0開始 */ .container > :nth-child(2n) { /* even代表偶數(shù)，可寫為:nth-child(even) */ background-color: rgb(206, 49, 253); } /* 選擇奇數(shù) */ .container > :nth-child(2n-1) { /* odd 代表奇數(shù)，可寫為:nth-child(odd) */ background-color: darkgreen; } /* 只選前3個(gè)，n從0開始 */ .container > :nth-child(-n + 3) { background-color: rgb(255, 166, 0); } /* 選擇倒數(shù)第2個(gè) */ .container > :nth-last-child(2) { background-color: darkmagenta; } /* 從第4個(gè)開始選擇后面所有的 */ .container > :nth-child(n + 4) { background-color: darkslateblue; } </style> </head> <body> <h2>偽類選擇器（結(jié)構(gòu)偽類不分組匹配）</h2> <!-- 使用九宮格來演示偽類選擇器 --> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </body></html>奇數(shù)偶數(shù)實(shí)例：
<!-- 選擇偶數(shù) -->.container > :nth-child(2n) { background-color: rgb(206, 49, 253); }<!-- 選擇奇數(shù) -->.container > :nth-child(2n-1) { background-color: darkgreen; }實(shí)例效果圖：
分組匹配
| 選擇器 | 描述 | 舉例 |
|---|---|---|
:first-of-type | 匹配按類型分組后的第一個(gè)子元素 | div :first-of-type |
:last-of-type | 匹配按類型分組后的最后一個(gè)子元素 | div :last-of-type |
:only-of-type | 匹配按類型分組后的唯一子元素 | div :only-of-type |
:nth-of-type() | 匹配按類型分組后的任意位置的子元素 | div :nth-of-type(n) |
:nth-last-of-type() | 匹配按類型分組后倒數(shù)任意位置的子元素 | div :nth-last-of-type(n) |
允許使用表達(dá)式來匹配一組元素，表達(dá)式中的“n”是從“0”開始計(jì)數(shù)，且必須寫到前面。
“-n”表示獲取前面一組元素，正數(shù)表示從指定位置獲取余下元素。
實(shí)例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 類選擇器 */ .item { font-size: 2rem; color: azure; background-color: cadetblue; display: flex; justify-content: center; align-items: center; } /* 選擇span分組的第一個(gè) */ .container span:first-of-type { background-color: darkslateblue; } /* 選擇span分組的最后一個(gè) */ .container span:last-of-type { background-color: slateblue; } /* 選擇div分組的前三個(gè) */ .container div:nth-of-type(-n + 3) { background-color: blue; } </style> </head> <body> <h2>偽類選擇器（結(jié)構(gòu)偽類分組匹配）</h2> <!-- 使用九宮格來演示偽類選擇器 --> <div class="container"> <!-- 第一組 --> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <!-- 第二組 --> <span class="item">5</span> <span class="item">6</span> <span class="item">7</span> <span class="item">8</span> <span class="item">9</span> </div> </body></html>實(shí)例效果圖：
| 選擇器 | 描述 | 舉例 |
|---|---|---|
:enabled | 匹配表單中有效屬性的元素 | input :enabled |
:disabled | 匹配表單中禁用屬性的元素 | input :disable |
required | 匹配表單中必選屬性的元素 | input :required |
實(shí)例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 所有有效的input控件 */ input:enabled { background-color: lightgreen; } /* 被禁用的 */ input:disabled { background-color: lightgray; } /* 所有必選項(xiàng) */ input:required { background-color: bisque; } </style> </head> <body> <h3>用戶登錄</h3> <form action="" method="POST"> <div> <label for="email">郵箱：</label> <input type="email" id="email" name="email" required placeholder="example@email.com" /> </div> <label for="password">密碼：</label> <input type="password" id="password" name="password" required placeholder="不得少于6位" /> <div> <label for="save">保存密碼：</label> <input type="checkbox" id="save" name="save" checked readonly /> </div> <div> <label for="save_time">保存期限：</label> <select name="save_time" id="save_time"> <option value="7" selected>7天</option> <option value="30">30天</option> </select> </div> <div> <input type="hidden" name="login_time" value="登錄時(shí)間戳" /> </div> <div> <label for="warning">警告：</label> <input type="text" id="warning" value="一天內(nèi)僅允許登錄3次" style="border: none;" disabled /> </div> <script> // 自動(dòng)生成時(shí)間戳，填充到表單隱藏域中 document.querySelector('[type="hidden"]').value = new Date().getTime(); </script> </form> </body></html>演示效果：
| 選擇器 | 描述 |
|---|---|
:active | 向被激活的元素添加樣式 |
:focus | 向擁有鍵盤輸入焦點(diǎn)的元素添加樣式 |
:hover | 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式 |
:link | 向未被訪問的鏈接添加樣式 |
:visited | 向已被訪問的鏈接添加樣式 |
:root | 根元素,通常是html |
:empty | 選擇沒有任何子元素的元素(含文本節(jié)點(diǎn)) |
:not() | 排除與選擇器參數(shù)匹配的元素 |
實(shí)例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /* 根元素 */ :root { /* html效果相同，但在xml中沒有html元素， */ background-color: lightsteelblue; } /* 觸發(fā)順序?yàn)閘ink-->visited-->hover-->active ,focus在hover和active之間*/ /* 未被訪問的鏈接 */ a:link { color: red; } /* 已被訪問的鏈接 */ a:visited { color: royalblue; } /* 當(dāng)鼠標(biāo)懸浮在元素上方時(shí) */ a:hover { color: yellow; } /* 被激活的元素 */ a:active { color: yellowgreen; } /* 擁有鍵盤輸入焦點(diǎn)的元素 */ a:focus { color: violet; } /* 選擇沒有任何子元素的元素(含文本節(jié)點(diǎn)) */ /* 指定空的 p 元素的背景色 */ p:empty { background-color: wheat; } /* :not()排除與選擇器參數(shù)匹配的元素 */ div :not([class="container"]) { color: yellow; } </style> </head> <body> <p></p> <a href="http:ipnx.cn">php中文網(wǎng)</a> <div> <div class="container">hello</div> <div>hello</div> </div> </body></html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)