免費 AI IDE
CSS3選擇器歸類整理（附CSS優(yōu)先級要點）
2025-06-24 16:55 更新
CSS3選擇器就像是網(wǎng)頁設(shè)計中的“魔法棒”，能讓網(wǎng)頁元素變得靈動起來。想象一下，你走進一家超級市場，貨架上的商品琳瑯滿目。如果你想快速找到某類商品，比如零食，你可能會先看零食區(qū)的標(biāo)識（這類似于 ID 選擇器），然后在貨架上挑選出那些包裝上有“薯片”標(biāo)簽的商品（這類似于類選擇器），最后再根據(jù)商品的產(chǎn)地、口味等細(xì)節(jié)（這類似于屬性選擇器）來決定買哪一個。CSS3選擇器的作用，就是幫助我們快速、精準(zhǔn)地定位到網(wǎng)頁中的元素，然后給它們施加上漂亮的樣式魔法。
一、CSS優(yōu)先級的小秘密
在學(xué)習(xí)CSS3選擇器之前，我們得先搞清楚CSS優(yōu)先級這個小秘密，不然有時候?qū)懞玫臉邮讲黄鹱饔?，可能會讓你一頭霧水。
CSS優(yōu)先級就像是學(xué)校里選班長的投票規(guī)則。每個CSS選擇器都有自己的“票數(shù)權(quán)重”。當(dāng)我們給同一個HTML元素應(yīng)用了多個CSS樣式時，瀏覽器就會比較這些樣式的“票數(shù)”，“票數(shù)高”的樣式就會獲勝。
優(yōu)先級的計算可以看成是一個四數(shù)字組合，比如：a, b, c, d。
- a：通常為0，除非在HTML標(biāo)簽上直接用了
style屬性，這就好比是“班長本人親自下令”，優(yōu)先級超級高。 - b：是選擇器里
id的數(shù)量總和，id就像是商品的條形碼，是獨一無二的，所以它的權(quán)重也比較高。 - c：是選擇器里類（
.class）、屬性選擇器（比如li[id=red]）和偽類（比如:hover）的數(shù)量總和，它們就像是商品的標(biāo)簽，能幫助我們快速篩選出一類商品。 - d：是元素選擇器（比如
table、p、div）和偽元素（比如:first-line）的數(shù)量總和，這是最基本的篩選方式，權(quán)重也相對最低。
舉個栗子：
#sidebar h2的優(yōu)先級是0, 1, 0, 1。h2.title的優(yōu)先級是0, 0, 1, 1。h2 + p的優(yōu)先級是0, 0, 0, 2。#sidebar p:first-line的優(yōu)先級是0, 1, 0, 2。
如果兩個選擇器優(yōu)先級一樣，那就像兩個同學(xué)票數(shù)一樣多，這時候誰在CSS文件里出現(xiàn)得靠后，誰就獲勝。
二、CSS3選擇器的魔法家族
CSS3選擇器的魔法家族成員眾多，每個都有自己的獨特能力，以下是具體的分類和常見選擇器的說明：
1. 基本選擇器
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
* | 通配選擇器 | 選擇文檔中所有HTML元素 |
E | 元素選擇器 | 選擇指定類型的HTML元素 |
#id | ID選擇器 | 選擇指定ID屬性值為“id”的任意類型元素 |
.class | 類選擇器 | 選擇指定class屬性值為“class”的任意類型的任意多個元素 |
selector1,selectorN | 群組選擇器 | 將每一個選擇器匹配的元素集合并 |
2. 層次選擇器
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
E F | 后代選擇器 | 選擇匹配的F元素，且匹配的F元素被包含在匹配的E元素內(nèi) |
E>F | 子選擇器 | 選擇匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
E+F | 相鄰兄弟選擇器 | 選擇匹配的F元素，且匹配的F元素緊位于匹配的E元素的后面 |
E~F | 通用選擇器 | 選擇匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
3. 動態(tài)偽類選擇器
| 選擇器 | 類型 | 功能描述 |
|---|---|---|
E:link | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并未被訪問過 |
E:visited | 鏈接偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超鏈接并已被訪問過 |
E:active | 用戶行為選擇器 | 選擇匹配的E元素，且匹配元素被激活 |
E:hover | 用戶行為選擇器 | 選擇匹配的E元素，且用戶鼠標(biāo)停留在元素E上 |
E:focus | 用戶行為選擇器 | 選擇匹配的E元素，而且匹配元素獲取焦點 |
4. 目標(biāo)偽類選擇器和UI元素狀態(tài)偽類選擇器
| 選擇器 | 功能描述 |
|---|---|
E:target | 選擇匹配E的所有元素，且匹配元素被相關(guān)URL指向 |
E:checked | 匹配選中的復(fù)選按鈕或者單選按鈕表單元素 |
E:enabled | 匹配所有啟用的表單元素 |
E:disabled | 匹配所有禁用的表單元素 |
5. 結(jié)構(gòu)偽類選擇器
| 選擇器 | 功能描述 |
|---|---|
E:first-child | 作為父元素的第一個子元素的元素E |
E:last-child | 作為父元素的最后一個子元素的元素E |
E:root | 選擇匹配元素E所在文檔的根元素 |
E F:nth-child(n) | 選擇父元素E的第n個子元素F |
E F:nth-last-child(n) | 選擇父元素E的倒數(shù)第n個子元素F |
E:nth-of-type(n) | 選擇父元素內(nèi)具有指定類型的第n個E元素 |
E:nth-last-of-type(n) | 選擇父元素內(nèi)具有指定類型的倒數(shù)第n個E元素 |
E:first-of-type | 選擇父元素內(nèi)具有指定類型的第一個E元素 |
E:last-of-type | 選擇父元素內(nèi)具有指定類型的最后一個E元素 |
E:only-child | 選擇父元素只包含一個子元素，且該子元素匹配E元素 |
E:only-of-type | 選擇父元素只包含一個同類型子元素，且該子元素匹配E元素 |
E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文本節(jié)點 |
6. 否定偽類選擇器
| 選擇器 | 功能描述 |
|---|---|
E:not(F) | 匹配所有除元素F外的E元素 |
7. 屬性選擇器
| 選擇器 | 功能描述 |
|---|---|
[attribute] | 用于選取帶有指定屬性的元素 |
[attribute = value] | 用于選取帶有指定屬性和值的元素 |
[attribute ~= value] | 用于選取屬性值中包含指定詞匯的元素 |
[attribute \|= value] | 用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞 |
[attribute ^= value] | 匹配屬性值以指定值開頭的每個元素 |
[attribute $= value] | 匹配屬性值以指定值結(jié)尾的每個元素 |
[attribute*= value] | 匹配屬性值中包含指定值的每個元素 |
三、CSS3選擇器的魔法咒語（代碼示例）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3選擇器魔法秀</title>
<style>
/* 通配選擇器 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 元素選擇器 */
p {
font-size: 16px;
color: #333;
}
/* ID選擇器 */
#header {
background-color: #f0f0f0;
padding: 20px;
}
/* 類選擇器 */
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 10px;
}
/* 后代選擇器 */
.container p {
color: red;
}
/* 子選擇器 */
.container > p {
font-weight: bold;
}
/* 相鄰兄弟選擇器 */
h2 + p {
background-color: #ffe6e6;
}
/* 通用選擇器 */
.container ~ .box {
border-color: blue;
}
/* 鼠標(biāo)懸停效果 */
.box:hover {
background-color: #f0f0f0;
}
/* 奇數(shù)行表格 */
table tr:nth-child(odd) {
background-color: #f9f9f9;
}
/* 排除帶有特定類的元素 */
.container div:not(.box) {
border: 1px dashed #ccc;
}
/* 帶有特定屬性的元素 */
input[type="text"] {
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="header">這是帶有ID的選擇器示例</div>
<div class="container">
<p>這是段落元素，受元素選擇器和后代選擇器影響。</p>
<p style="color: blue;">這個段落帶有內(nèi)聯(lián)樣式，它的優(yōu)先級最高哦。</p>
<div class="box">這個是類選擇器示例，在鼠標(biāo)懸停時會有變化。</div>
<div class="box" style="border-color: red;">這個帶有內(nèi)聯(lián)樣式，邊框是紅色。</div>
</div>
<h2>標(biāo)題元素</h2>
<p>我是緊挨在標(biāo)題后面的段落哦，看我的背景顏色變化。</p>
<div class="box">這個盒子不受特定排除條件影響。</div>
<input type="text" placeholder="輸入文字看看樣式">
<table>
<tr>
<td>表格行1</td>
</tr>
<tr>
<td>表格行2</td>
</tr>
<tr>
<td>表格行3</td>
</tr>
</table>
<div class="container">
<p>這個段落只受子選擇器影響哦。</p>
</div>
</body>
</html>
四、為什么要學(xué)會CSS3選擇器？
CSS3選擇器就像是網(wǎng)頁設(shè)計的“瑞士軍刀”，用途廣泛且強大：
- 樣式定制：能精準(zhǔn)地控制網(wǎng)頁中每個元素的外觀，讓頁面變得美觀、獨特。
- 交互效果：通過偽類選擇器，能實現(xiàn)豐富的交互效果，提升用戶體驗。
- 響應(yīng)式布局：結(jié)合媒體查詢，能根據(jù)不同的設(shè)備屏幕大小，靈活地調(diào)整元素的樣式。
- 代碼可維護性：使用選擇器合理組織樣式代碼，能讓代碼結(jié)構(gòu)清晰，便于后期的維護和擴展。
總之，CSS3選擇器是網(wǎng)頁設(shè)計中不可或缺的技能。掌握它們，就像掌握了開啟網(wǎng)頁設(shè)計寶庫的鑰匙。
希望這篇文章能幫助你更好地理解和運用CSS3選擇器，在網(wǎng)頁設(shè)計的道路上越走越遠(yuǎn)！
以上內(nèi)容是否對您有幫助：
更多建議：