CSS选择器主要分为以下几种：
1.元素选择器：
直接通过HTML元素的名称来选择元素。
p { |
|
color: red; |
|
} |
上述代码将选择页面上的所有<p>元素，并将它们的文本颜色设置为红色。
2.类选择器：
通过HTML元素的class属性来选择元素。
.myClass { |
|
font-size: 20px; |
|
} |
上述代码将选择所有class属性值为myClass的元素，并将它们的字体大小设置为20像素。
3.ID选择器：
通过HTML元素的id属性来选择元素。
#myID { |
|
background-color: yellow; |
|
} |
上述代码将选择id属性值为myID的元素，并将其背景颜色设置为黄色。
4.属性选择器：
通过HTML元素的属性及其值来选择元素。
a[target="_blank"] { |
|
text-decoration: none; |
|
} |
上述代码将选择所有target属性值为_blank的<a>元素，并去除它们的文本装饰（比如下划线）。
5.伪类选择器：
用于选择HTML元素的特定状态。
a:hover { |
|
color: blue; |
|
} |
上述代码将在鼠标悬停在<a>元素上时，将其文本颜色设置为蓝色。
6.后代选择器（也称为空格选择器）：
通过空格分隔来选择某个元素的后代元素。
|
|
color: green; |
|
} |
上述代码将选择所有<div>元素内部的<p>元素，并将它们的文本颜色设置为绿色。
7.子元素选择器（也称为大于符号选择器）：
通过>符号来选择某个元素的直接子元素。
div > p { |
|
color: purple; |
|
} |
上述代码将只选择那些直接作为<div>元素子元素的<p>元素，并将它们的文本颜色设置为紫色。
8.相邻兄弟选择器（也称为加号选择器）：
通过+符号来选择某个元素的下一个兄弟元素。
div + p { |
|
color: orange; |
|
} |
上述代码将选择所有紧接在<div>元素之后的<p>元素，并将它们的文本颜色设置为橙色。
9.通用兄弟选择器（也称为波浪号选择器）：
通过~符号来选择某个元素之后的所有兄弟元素。
div ~ p { |
|
color: pink; |
|
} |
上述代码将选择所有在<div>元素之后的<p>元素（无论它们之间有多少其他元素），并将它们的文本颜色设置为粉色。
10.伪元素选择器：
用于选择元素的某些部分，如首行、首字母等。
p::first-line { |
|
text-indent: 2em; |
|
} |
上述代码将选择所有<p>元素的首行，并将它们缩进两个字符宽度。
这些只是CSS选择器的基本类型，实际上CSS还支持更复杂的组合和嵌套使用这些选择器。在实际开发中，灵活地使用这些选择器可以实现非常精细和强大的样式控制。
