一、CSS 選擇器基礎：快速掌握核心概念
-
什么是選擇器？
CSS 選擇器就像 “網頁元素的遙控器”，用于定位 HTML 中的特定元素并應用樣式。/* 結構：選擇器 { 屬性: 值; } */ p { color: red; } /* 選擇所有<p>元素，文字變紅 */ -
元素選擇器（標簽選擇器）
- 直接用 HTML 標簽名作為選擇器（如?
div,?h1,?a）。 - 作用于頁面中所有該類型的元素。
h2 { font-size: 20px; } /* 所有<h2>標題字體大小為20px */ img { border: 1px solid gray; } /* 所有圖片添加邊框 */ - 直接用 HTML 標簽名作為選擇器（如?
-
類選擇器（Class Selector）
- 通過元素的?
class?屬性匹配，可復用（一個元素可擁有多個類）。 - 命名規則：
- 必須以?
.?開頭（如?.highlight）。 - 只能包含字母、數字、連字符（
-）、下劃線（_）。 - 不能以數字開頭，不能包含空格。
?<!-- HTML --> <p class="error-message">這是錯誤提示</p>/* CSS */ .error-message { color: red; } /* 所有class="error-message"的元素變紅 */ .btn-primary { background: blue; } /* 主按鈕樣式 */ - 必須以?
- 通過元素的?
-
ID 選擇器
- 通過元素的?
id?屬性匹配，必須唯一（一個頁面中不能重復）。 - 命名規則與類相似，但以?
#?開頭（如?#header）。
<!-- HTML --> <div id="main-content">內容區域</div>/* CSS */ #main-content { width: 800px; } /* id="main-content"的元素寬度為800px */ - 通過元素的?
-
通配符選擇器（
*）- 匹配所有元素，常用于全局樣式重置。
* { margin: 0; padding: 0; } /* 所有元素的邊距重置為0 */
二、組合選擇器：多條件篩選元素
-
后代選擇器（空格分隔）
- 選擇某個元素內部的所有后代元素（無論嵌套多深）。
article p { line-height: 1.6; } /* 所有<article>內的<p>元素行高為1.6 */ -
子選擇器（>`）
- 只選擇某個元素的直接子元素（一級子元素）。
nav > ul { background: lightgray; } /* 導航欄(nav)的直接子元素<ul>添加背景色 */ -
相鄰兄弟選擇器（
+）- 選擇緊接在另一個元素后的同級元素。
h3 + p { margin-top: 10px; } /* 每個<h3>后的第一個<p>元素頂部邊距為10px */ -
通用兄弟選擇器（
~）- 選擇前面某個元素后的所有同級元素。
img ~ figcaption { font-style: italic; } /* 每個<img>后的所有<figcaption>變斜體 */
三、屬性選擇器：按元素屬性篩選
通過元素的屬性或屬性值來選擇元素。
[disabled] { opacity: 0.5; } /* 所有帶disabled屬性的元素透明度降低 */
a[target="_blank"] { color: purple; } /* 所有打開新窗口的鏈接變紫色 */
input[type="email"] { border-color: blue; } /* 郵箱輸入框邊框變藍 */
四、偽類選擇器（Pseudo-classes）
定義：偽類用于選擇處于特定狀態或位置的元素，以冒號?:?開頭。
1. 動態偽類（用戶交互狀態）
a:hover { color: red; } /* 鼠標懸停時鏈接變紅 */
button:active { background: blue; } /* 按鈕被點擊時背景變藍 */
input:focus { outline: 2px solid green; } /* 輸入框獲得焦點時顯示綠色邊框 */
a:visited { color: purple; } /* 已訪問鏈接變紫色 */
2. 結構偽類（位置關系）
li:first-child { font-weight: bold; } /* 第一個列表項加粗 */
li:last-child { border-bottom: none; } /* 最后一個列表項去掉下邊框 */
p:nth-child(even) { background: #f0f0f0; } /* 偶數位置的段落添加淺灰色背景 */
p:nth-child(3) { color: blue; } /* 第三個段落變藍色 */
p:nth-of-type(odd) { font-style: italic; } /* 奇數位置的<p>元素變斜體 */
3. 邏輯偽類（條件篩選）
:not(.highlight) { opacity: 0.8; } /* 非.highlight類的元素透明度降低 */
input:required { border: 1px solid red; } /* 必填字段添加紅色邊框 */
input:disabled { background: #eee; } /* 禁用的輸入框添加灰色背景 */
4. 目標偽類（URL 錨點）
:target { background: yellow; } /* 當前URL錨點對應的元素高亮 */
五、偽元素選擇器（Pseudo-elements）
定義：偽元素用于選擇元素的特定部分（如首字母、內容前后插入的虛擬元素），以雙冒號?::?開頭（單冒號也兼容）。
1. 內容插入偽元素
p::before {content: "? "; /* 在每個<p>元素前插入箭頭符號 */color: red;
}p::after {content: " ?"; /* 在每個<p>元素后插入對勾符號 */
}blockquote::before {content: open-quote; /* 插入左引號 */font-size: 2em;
}
2. 文本片段偽元素
p::first-letter {font-size: 2em; /* 段落首字母放大 */font-weight: bold;float: left;margin-right: 5px;
}p::first-line {color: blue; /* 段落首行變藍色 */
}
3. 選中狀態偽元素
::selection {background: purple; /* 用戶選中文本時的背景色 */color: white; /* 用戶選中文本時的文字顏色 */
}
4. 輸入框占位符偽元素
input::placeholder {color: #999; /* 輸入框占位文本變灰色 */font-style: italic;
}
六、選擇器優先級：解決樣式沖突
當多個選擇器作用于同一元素時，優先級由高到低：
- 內聯樣式（如?
<div style="color: red">） - ID 選擇器（#id）
- 類 / 屬性 / 偽類選擇器（.class, [attr], :hover）
- 元素 / 偽元素選擇器（p, ::before）
- 通配符（*）
記憶口訣：
- ID（最高） →?Class →?Element（最低），簡稱?ICE 原則。
- 相同優先級時，后定義的樣式生效。
- !important?可強制提升優先級（但盡量避免使用）。
七、初學者常見誤區
-
濫用 ID 選擇器
ID 必須唯一，應優先使用類選擇器實現復用。 -
過度嵌套選擇器
避免深層后代選擇器（如?div ul li a），優先使用類直接定位。 -
忽略繼承
顏色、字體等屬性會自動繼承，無需為每個元素重復定義。
八、實戰練習：選擇器應用場景
<!-- HTML 示例 -->
<header class="site-header"><nav><ul><li><a href="#" class="active">首頁</a></li><li><a href="#">產品</a></li></ul></nav>
</header>
/* CSS 選擇器示例 */
.site-header { background: #333; } /* 類選擇器 */
nav ul { list-style: none; } /* 后代選擇器 */
nav > ul > li { display: inline-block; } /* 子選擇器 */
a.active { color: white; } /* 組合類選擇器 */
總結：選擇器是 CSS 的基石
通過系統學習選擇器，你可以精準控制網頁的每一個元素。建議結合實際項目練習，加深對不同選擇器的理解和運用。
)
：2024 年物聯網概述)
![[解決方案] Word轉PDF](http://pic.xiahunao.cn/[解決方案] Word轉PDF)
