CSS中有许多不同类型的选择器,下面介绍一些常见的选择器。
1. 元素选择器
通过HTML元素名称
选择元素
p { color: red; }
2. 类选择器
通过类名
选择元素,以点(.)开头
.highlight { background-color: yellow; }
3. ID选择器
通过ID
选择元素,以井号(#)开头
#header { font-size: 24px; }
4. 后代选择器
选择特定元素内部的后代元素,用空格
分隔
div p { font-style: italic; }
5. 子元素选择器
选择特定元素的直接子元素
,用大于号(>)表示
ul > li { list-style-type: square; }
6. 相邻兄弟选择器
选择紧接在另一个元素后的同级元素,用加号(+)表示
h2 + p { color: blue; }
7. 通用选择器
选择所有元素,用星号(*)表示
* { margin: 0; padding: 0; }
8. 伪类选择器
用于选择元素的特定状态,例如:hover
用于鼠标悬停状态
a:hover { text-decoration: underline; }
9. 伪元素选择器
用于选择元素的特定部分,例如::before
用于在元素前插入内容
p::before { content: "前缀"; }