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选择器是控制样式作用范围的核心工具，合理使用可大幅提升代码复用性和维护性。