CSS 選擇器用于“查找”（或選?。┮O置樣式的 HTML 元素。本文將詳細介紹各種常見的 CSS 選擇器，并提供具體的使用方法和示例。

基本選擇器

元素選擇器

選擇特定類型的HTML元素。

p {
    color: blue;
}

上述代碼會使所有的<p>標簽文字變為藍色。

類選擇器

通過類名選擇元素。一個元素可以有多個類，不同的類之間以空格分隔。

.highlight {
    background-color: yellow;
}

對應的HTML：

<p class="highlight">這段文字背景是黃色。</p>

ID選擇器

通過ID選擇唯一的一個元素。每個頁面中的ID必須是唯一的。

#header {
    font-size: 24px;
}

對應的HTML：

<div id="header">這是頭部</div>

層級選擇器

后代選擇器

選擇某個元素的所有后代元素。

article p {
    line-height: 1.5;
}

上述代碼會使<article>下的所有<p>標簽行間距為1.5倍。

子選擇器

僅選擇某個元素的直接子元素。

ul > li {
    margin-bottom: 10px;
}

上述代碼會使<ul>下的直接<li>標簽底部外邊距為10像素。

相鄰兄弟選擇器

選擇緊跟在另一個元素后的同級元素。

h2 + p {
    font-style: italic;
}

上述代碼會使緊接在<h2>后面的<p>標簽字體變為斜體。

普通兄弟選擇器

選擇某個元素之后的所有同級元素。

h2 ~ p {
    text-decoration: underline;
}

上述代碼會使<h2>后面的所有<p>標簽文本下劃線。

屬性選擇器

包含屬性的選擇器

選擇包含指定屬性的元素。

a[href] {
    color: green;
}

上述代碼會選擇所有帶有href屬性的<a>標簽并將它們的顏色設為綠色。

屬性值完全匹配的選擇器

選擇具有特定屬性值的元素。

input[type="text"] {
    width: 200px;
}

上述代碼會選擇所有type屬性值為text的<input>標簽并設置寬度為200像素。

屬性值部分匹配的選擇器

屬性值開頭匹配

選擇屬性值以特定字符串開頭的元素。

[src^="https"] {
    border: 1px solid red;
}

上述代碼會選擇所有src屬性值以https開頭的元素并設置紅色邊框。

屬性值結尾匹配

選擇屬性值以特定字符串結尾的元素。

[href$=".pdf"] {
    color: purple;
}

上述代碼會選擇所有href屬性值以.pdf結尾的元素并將它們的顏色設為紫色。

屬性值包含匹配

選擇屬性值中包含特定字符串的元素。

[class*="btn"] {
    padding: 10px 20px;
}

上述代碼會選擇所有class屬性值中包含btn的元素并設置內邊距。

屬性值列表匹配

選擇屬性值是一個由空格分隔的列表且其中至少有一個值與指定值相匹配的元素。

[rel~="external"] {
    font-weight: bold;
}

上述代碼會選擇所有rel屬性值包含external的元素并將它們的字體加粗。

偽類選擇器

第一個子元素

選擇作為其父元素的第一個子元素的元素。

li:first-child {
    font-weight: bold;
}

上述代碼會選擇每個<ul>或<ol>中的第一個<li>元素并將其字體加粗。

最后一個子元素

選擇作為其父元素的最后一個子元素的元素。

tr:last-child td {
    border-bottom: none;
}

上述代碼會選擇每個<table>的最后一行<td>元素并移除底邊框。

唯一子元素

選擇作為其父元素的唯一子元素的元素。

dt:only-child {
    font-style: italic;
}

上述代碼會選擇沒有兄弟元素的<dt>元素并將其字體變為斜體。

nth子元素

選擇作為其父元素的第n個子元素的元素。

p:nth-child(2) {
    color: gray;
}

上述代碼會選擇每個父元素的第二個<p>元素并將其顏色設為灰色。

nth-last子元素

選擇作為其父元素的倒數第n個子元素的元素。

p:nth-last-child(2) {
    color: orange;
}

上述代碼會選擇每個父元素的倒數第二個<p>元素并將其顏色設為橙色。

鼠標懸停狀態

選擇鼠標懸停在其上的元素。

a:hover {
    text-decoration: underline;
}

上述代碼會選擇當鼠標懸停在鏈接上時為其添加下劃線。

被激活的狀態

選擇被用戶激活的元素（例如點擊）。

button:active {
    background-color: darkblue;
}

上述代碼會選擇當按鈕被按下時改變其背景顏色。

已訪問過的鏈接

選擇已經被用戶訪問過的鏈接。

a:visited {
    color: purple;
}

上述代碼會選擇已經被用戶訪問過的鏈接并將其顏色設為紫色。

獲取焦點的元素

選擇當前獲得焦點的元素。

input:focus {
    outline: 2px dashed black;
}

上述代碼會選擇當前獲得焦點的輸入框并在周圍繪制虛線輪廓。

禁用狀態

選擇處于禁用狀態的表單控件。

input:disabled {
    opacity: 0.5;
}

上述代碼會選擇處于禁用狀態的輸入框并使其透明度降低。

可用狀態

選擇可用的表單控件。

input:enabled {
    background-color: lightgreen;
}

上述代碼會選擇可用的輸入框并設置其背景顏色。

檢查狀態

選擇選中的復選框或單選按鈕。

input:checked {
    box-shadow: 0 0 5px 2px #6699ff;
}

上述代碼會選擇選中的復選框或單選按鈕并在其周圍繪制陰影。

占位符可見狀態

選擇顯示占位符文本的輸入框。

input::placeholder {
    color: silver;
}

上述代碼會選擇顯示占位符文本的輸入框并將占位符顏色設為銀色。

必填字段

選擇必填字段。

input:required {
    border: 2px solid red;
}

上述代碼會選擇必填字段并設置紅色邊框。

無效字段

選擇無效字段。

input:invalid {
    background-color: pink;
}

上述代碼會選擇無效字段并設置粉紅色背景。

有效字段

選擇有效字段。

input:valid {
    background-color: lightgreen;
}

上述代碼會選擇有效字段并設置淺綠色背景。

偽元素選擇器

第一個字母

選擇元素內容的第一個字母。

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

上述代碼會選擇段落的第一個字母并將其放大加粗。

第一行

選擇元素內容的第一行。

p::first-line {
    font-variant: small-caps;
}

上述代碼會選擇段落的第一行并將其轉換為小型大寫字母。

內容插入

在元素的內容前后插入內容。

q::before {
    content: "「";
}

q::after {
    content: "」";
}

上述代碼會在引用符號前插入中文左引號，在引用符號后插入中文右引號。