2.1 基本選擇器回顧

在開(kāi)始介紹CSS3選擇器之前，我們先回顧一下CSS的基本選擇器。這些選擇器是所有CSS開(kāi)發(fā)的基礎(chǔ)。

2.1.1 元素選擇器

元素選擇器用于選中指定類(lèi)型的HTML元素。

/* 選中所有的<p>元素 */
p {color: blue;
}

2.1.2 類(lèi)選擇器

類(lèi)選擇器用于選中擁有特定類(lèi)名的元素。類(lèi)選擇器以句點(diǎn)（.）開(kāi)頭。

/* 選中所有類(lèi)名為"example"的元素 */
.example {color: red;
}

2.1.3 ID選擇器

ID選擇器用于選中擁有特定ID的元素。ID選擇器以井號(hào)（#）開(kāi)頭。

/* 選中ID為"header"的元素 */
#header {background-color: green;
}

2.1.4 后代選擇器

后代選擇器用于選中某個(gè)元素的所有后代元素。

/* 選中所有在<div>內(nèi)的<p>元素 */
div p {color: purple;
}

2.1.5 組選擇器

組選擇器用于選中多個(gè)選擇器對(duì)應(yīng)的元素。

/* 選中所有的<h1>和<p>元素 */
h1, p {margin: 0;
}

2.2 CSS3新增選擇器

CSS3引入了許多新選擇器，使得選擇元素更加精確和靈活。

2.2.1 屬性選擇器

屬性選擇器允許你根據(jù)元素的屬性及其值來(lái)選中元素。

/* 選中所有屬性包含"example"的元素 */
a[href*="example"] {color: red;
}/* 選中所有屬性以"example"結(jié)尾的元素 */
a[href$="example"] {color: blue;
}/* 選中所有屬性以"example"開(kāi)頭的元素 */
a[href^="example"] {color: green;
}

2.2.2 目標(biāo)偽類(lèi)選擇器

:target 選擇器用于選中當(dāng)前活動(dòng)的錨點(diǎn)目標(biāo)。

/* 當(dāng)鏈接目標(biāo)被選中時(shí)改變其樣式 */
:target {background-color: yellow;
}

2.2.3 :nth-child() 選擇器

:nth-child() 選擇器允許開(kāi)發(fā)者選中特定的子元素。

/* 選中每個(gè)第二個(gè)子元素 */
li:nth-child(2n) {background-color: lightgray;
}/* 選中每個(gè)第三個(gè)同類(lèi)型的子元素 */
li:nth-of-type(3n) {color: blue;
}

2.3 偽類(lèi)與偽元素

偽類(lèi)和偽元素是CSS的重要特性，用于選擇不可見(jiàn)的元素或元素的某一部分。

2.3.1 偽類(lèi)

偽類(lèi)用于選中元素的特定狀態(tài)。

/* 選中鼠標(biāo)懸停時(shí)的元素 */
a:hover {color: orange;
}/* 選中獲得焦點(diǎn)的輸入框 */
input:focus {border-color: blue;
}

2.3.2 偽元素

偽元素用于選擇元素的一部分，如首字母或內(nèi)容前后的位置。

/* 選中<p>元素的首字母 */
p::first-letter {font-size: 2em;color: red;
}/* 在每個(gè)<p>元素的內(nèi)容前插入內(nèi)容 */
p::before {content: "Note: ";font-weight: bold;
}

2.4 選擇器的優(yōu)先級(jí)與最佳實(shí)踐

選擇器的優(yōu)先級(jí)決定了當(dāng)多個(gè)選擇器匹配同一個(gè)元素時(shí)，哪個(gè)選擇器的樣式會(huì)被應(yīng)用。了解選擇器的優(yōu)先級(jí)對(duì)編寫(xiě)高效的CSS代碼非常重要。

2.4.1 選擇器優(yōu)先級(jí)規(guī)則

優(yōu)先級(jí)由四個(gè)部分組成，從高到低依次是：內(nèi)聯(lián)樣式、ID選擇器、類(lèi)選擇器/屬性選擇器/偽類(lèi)、元素選擇器/偽元素。

/* 內(nèi)聯(lián)樣式優(yōu)先級(jí)最高 */
<style><div style="color: red;">內(nèi)聯(lián)樣式</div>
</style>/* ID選擇器 */
#id {color: blue; /* 優(yōu)先級(jí)為 0, 1, 0, 0 */
}/* 類(lèi)選擇器 */
.class {color: green; /* 優(yōu)先級(jí)為 0, 0, 1, 0 */
}/* 元素選擇器 */
div {color: yellow; /* 優(yōu)先級(jí)為 0, 0, 0, 1 */
}

2.4.2 注意事項(xiàng)

1. 避免過(guò)度使用ID選擇器：ID選擇器優(yōu)先級(jí)很高，不易覆蓋，盡量使用類(lèi)選擇器。
2. 結(jié)構(gòu)清晰：確保CSS代碼結(jié)構(gòu)清晰，選擇器簡(jiǎn)潔易懂。
3. 使用后代選擇器謹(jǐn)慎：后代選擇器的優(yōu)先級(jí)較高，過(guò)多使用會(huì)導(dǎo)致樣式難以維護(hù)。
4. 利用瀏覽器開(kāi)發(fā)工具：使用瀏覽器開(kāi)發(fā)工具（如Chrome DevTools）來(lái)調(diào)試和查看選擇器優(yōu)先級(jí)。

2.5 選擇器的優(yōu)先級(jí)與最佳實(shí)踐

選擇器的優(yōu)先級(jí)決定了當(dāng)多個(gè)選擇器匹配同一個(gè)元素時(shí)，哪個(gè)選擇器的樣式會(huì)被應(yīng)用。了解選擇器的優(yōu)先級(jí)對(duì)編寫(xiě)高效的CSS代碼非常重要。

2.5.1 選擇器優(yōu)先級(jí)規(guī)則

優(yōu)先級(jí)由四個(gè)部分組成，從高到低依次是：內(nèi)聯(lián)樣式、ID選擇器、類(lèi)選擇器/屬性選擇器/偽類(lèi)、元素選擇器/偽元素。

/* 內(nèi)聯(lián)樣式優(yōu)先級(jí)最高 */
<style><div style="color: red;">內(nèi)聯(lián)樣式</div>
</style>/* ID選擇器 */
#id {color: blue; /* 優(yōu)先級(jí)為 0, 1, 0, 0 */
}/* 類(lèi)選擇器 */
.class {color: green; /* 優(yōu)先級(jí)為 0, 0, 1, 0 */
}/* 元素選擇器 */
div {color: yellow; /* 優(yōu)先級(jí)為 0, 0, 0, 1 */
}

2.5.2 注意事項(xiàng)

1. 避免過(guò)度使用ID選擇器：ID選擇器優(yōu)先級(jí)很高，不易覆蓋，盡量使用類(lèi)選擇器。
2. 結(jié)構(gòu)清晰：確保CSS代碼結(jié)構(gòu)清晰，選擇器簡(jiǎn)潔易懂。
3. 使用后代選擇器謹(jǐn)慎：后代選擇器的優(yōu)先級(jí)較高，過(guò)多使用會(huì)導(dǎo)致樣式難以維護(hù)。
4. 利用瀏覽器開(kāi)發(fā)工具：使用瀏覽器開(kāi)發(fā)工具（如Chrome DevTools）來(lái)調(diào)試和查看選擇器優(yōu)先級(jí)。