CSS选择器
目录
一、CSS 选择器
1. 标签选择器
2. 类选择器
3. ID 选择器
4. 通配符选择器
5. 其他常用选择器
6. 选择器优先级
二、复合选择器
1. 后代选择器（空格）
2. 子选择器（>）
3. 相邻兄弟选择器（+）
4. 通用兄弟选择器（~）
5. 群组选择器（,）
三、伪类选择器
1. 状态伪类
2. 结构伪类
3. 表单伪类
四、结构伪类选择器
1. :first-child 与 :last-child
2. :nth-child(n) 与 :nth-last-child(n)
3. :nth-of-type(n) 与 :nth-last-of-type(n)
4. :only-child 与 :only-of-type
五、伪元素选择器
1. ::before 与 ::after
2. ::first-line 与 ::first-letter
3. ::selection
一、CSS 选择器
选择器用于指定 CSS 样式规则的应用对象，以下是核心选择器及用法：
1. 标签选择器
-
语法：
标签名 { 样式 } -
作用：选择所有指定 HTML 标签。
-
示例：
p { color: blue; /* 所有段落文本为蓝色 */ }
2. 类选择器
-
语法：
.类名 { 样式 } -
作用：选择所有具有相同
class属性的元素。 -
示例：
.highlight { background-color: yellow; /* 高亮背景 */ }<span class="highlight">重要内容</span>
3. ID 选择器
-
语法：
#id名 { 样式 } -
作用：选择唯一具有指定
id的元素。 -
示例：
#header { font-size: 24px; /* 页面头部字体大小 */ }<div id="header">网站标题</div>
4. 通配符选择器
-
语法：
* { 样式 } -
作用：选择页面所有元素。
-
示例：
* { margin: 0; /* 清除所有元素的外边距 */ }
5. 其他常用选择器
-
后代选择器：
父元素 子元素（如div p选择所有在div内的段落）。 -
子选择器：
父元素 > 子元素（仅直接子元素）。 -
相邻兄弟选择器：
元素 + 元素（如h1 + p选择紧接在h1后的第一个段落）。
6. 选择器优先级
-
权重顺序：
!important> 行内样式 >#id>.class> 标签 > 通配符。 -
避免过度使用
!important，推荐通过优化选择器结构管理优先级。
二、复合选择器
复合选择器通过组合多个简单选择器实现更精确的元素定位。
1. 后代选择器（空格）
-
语法：
祖先选择器 后代选择器 { 样式 } -
作用：选择所有嵌套在祖先元素内的后代元素。
-
示例：
div p { color: red; /* div 内的所有段落文本变红 */ }
2. 子选择器（>）
-
语法：
父选择器 > 子选择器 { 样式 } -
作用：仅选择直接子元素。
-
示例：
ul > li { list-style: none; /* 仅清除 ul 的直接子 li 的项目符号 */ }
3. 相邻兄弟选择器（+）
-
语法：
前一个选择器 + 后一个选择器 { 样式 } -
作用：选择紧接在前一个元素后的第一个兄弟元素。
-
示例：
h1 + p { margin-top: 0; /* 紧接在 h1 后的第一个段落顶部无外边距 */ }
4. 通用兄弟选择器（~）
-
语法：
前一个选择器 ~ 后续兄弟选择器 { 样式 } -
作用：选择前一个元素之后的所有同级元素。
-
示例：
h2 ~ p { font-style: italic; /* h2 之后的所有段落变为斜体 */ }
5. 群组选择器（,）
-
语法：
选择器1, 选择器2 { 样式 } -
作用：同时为多个选择器应用相同样式。
-
示例：
h1, h2, h3 { font-family: "Arial", sans-serif; }
三、伪类选择器
伪类选择器用于定义元素的特定状态或结构位置。
1. 状态伪类
-
:hover：鼠标悬停时触发。 -
:active：元素被激活（如点击）时生效。 -
:focus：元素获得焦点时（如表单输入）。 -
:visited：已访问的链接。 -
:checked：选中的复选框或单选按钮。 -
示例：
a:hover { color: #ff4500; /* 链接悬停时变为橙色 */ } input:focus { border-color: blue; /* 输入框聚焦时边框变蓝 */ }
2. 结构伪类
-
:first-child：父元素的第一个子元素。 -
:last-child：父元素的最后一个子元素。 -
:nth-child(n)：第 n 个子元素（支持公式如2n+1）。 -
:nth-of-type(n)：同类型中的第 n 个元素。 -
:not(selector)：排除匹配选择器的元素。 -
示例：
li:nth-child(odd) { background: #f0f0f0; /* 奇数行列表项背景变灰 */ } p:not(.warning) { color: #333; /* 非警告类段落文本为深灰色 */ }
3. 表单伪类
-
:disabled：禁用状态的表单元素。 -
:required：必填字段。 -
示例：
input:disabled { opacity: 0.5; /* 禁用输入框半透明 */ }
四、结构伪类选择器
结构伪类选择器根据元素在文档树中的位置或结构关系进行选择。
1. :first-child 与 :last-child
-
作用：选择父元素的第一个或最后一个子元素。
-
示例：
ul li:first-child { color: red; /* 列表的第一个项变红 */ } ul li:last-child { font-weight: bold; /* 列表的最后一项加粗 */ }
2. :nth-child(n) 与 :nth-last-child(n)
-
作用：选择父元素的第 n 个子元素（正向或逆向计数）。
-
参数：
-
数字：如
2选择第二个元素。 -
公式：如
2n+1（奇数项）、even（偶数项）。
-
-
示例：
tr:nth-child(2n) { background: #f5f5f5; /* 表格偶数行背景变灰 */ } tr:nth-last-child(1) { border-bottom: none; /* 最后一行无底部边框 */ }
3. :nth-of-type(n) 与 :nth-last-of-type(n)
-
作用：选择同类型元素中的第 n 个（正向或逆向计数）。
-
示例：
article:nth-of-type(3) { border: 2px solid blue; /* 第三个 article 元素加蓝色边框 */ }
4. :only-child 与 :only-of-type
-
作用：
-
:only-child：选择作为父元素唯一子元素的元素。 -
:only-of-type：选择父元素中唯一类型的元素。
-
-
示例：
div p:only-child { color: green; /* 当 div 内只有一个 p 时生效 */ }
五、伪元素选择器
伪元素选择器用于在元素内容前后插入虚拟元素或修饰特定部分。
1. ::before 与 ::after
-
作用：在元素内容的前面或后面插入内容（需配合
content属性）。 -
示例：
.price::before { content: "¥"; /* 价格前添加货币符号 */ color: #ff4500; } .tooltip::after { content: attr(data-tip); /* 通过 data 属性动态显示提示 */ display: none; position: absolute; }
2. ::first-line 与 ::first-letter
-
作用：
-
::first-line：选择元素的首行文本。 -
::first-letter：选择元素的首字母。
-
-
示例：
p::first-line { font-weight: bold; /* 段落首行加粗 */ } p::first-letter { font-size: 2em; /* 首字母放大 */ float: left; }
3. ::selection
-
作用：自定义用户选中文本的样式。
-
示例：
::selection { background: #ffb7b7; /* 选中文本背景为粉色 */ color: #000; }