【CSS系统化学习】- CSS选择器 2. CSS选择器以下是CSS中常用的选择器及其示例：元素选择器作用：通过HTML标签名选择元素。语法：p { font-size: 16px; }示例：选中所有<p>标签并设置字体大小。类选择器作用：通过类名（class）选择元素。语法：.warning { color: #ff0000; border: 1px solid red; }示例：选中所有class="warning"的元素并设置红色文本和边框。注意：一个元素可以有多个类（如class="button primary"）。ID选择器作用：通过唯一ID（id）选择元素。语法：#header { background-color: #333; padding: 20px; }示例：选中id="header"的元素并设置背景颜色。注意：ID在页面中应是唯一的。属性选择器作用：根据元素的属性或属性值选择元素。语法：/* 选中包含title属性的元素 */ [title] { cursor: help; } /* 选中type="text"的输入框 */ input[type="text"] { border: 1px solid #ccc; }示例：为所有带有title属性的元素添加帮助光标。伪类选择器作用：选择元素的特定状态（如悬停、聚焦等）。语法：/* 悬停状态 */ a:hover { text-decoration: underline; } /* 第一个子元素 */ li:first-child { font-weight: bold; } /* 无效的输入框 */ input:invalid { border-color: red; }常见伪类：:hover, :active, :focus, :nth-child(n), :not(selector)。伪元素选择器作用：为元素的特定部分添加样式（如首行、首字母等）。语法：/* 段落的首字母 */ p::first-letter { font-size: 24px; } /* 元素内容前插入内容 */ .note::before { content: "⚠️ "; } /* 选中被用户选中的文本 */ ::selection { background: yellow; }常见伪元素：::before, ::after, ::first-line, ::placeholder。注意：伪元素使用双冒号（::），伪类用单冒号（:）。组合使用示例/* 类选择器 + 伪类 */ .button:hover { opacity: 0.8; } /* 后代选择器 */ nav ul li { list-style: none; } /* 子选择器 */ .container > .item { margin: 10px; }总结 CSS选择器是控制样式作用范围的核心工具，合理使用可大幅提升代码复用性和维护性。