基础选择器：
1. 元素选择器：
p {
/* 样式规则 */
}
2. 类选择器：
.my-class {
/* 样式规则 */
}
3. ID选择器：
#my-id {
/* 样式规则 */
}
组合选择器：
4. 后代选择器：
div p {
/* div 内的所有 p 元素 */
}
5. 子元素选择器：
ul > li {
/* ul 中的直接子元素 li */
}
属性选择器：
6. 属性存在选择器：
[type] {
/* 拥有 type 属性的元素 */
}
7. 属性值选择器：
[type="text"] {
/* type 属性值为 "text" 的元素 */
}
伪类和伪元素：
8. 伪类选择器：
a:hover {
/* 鼠标悬停在 a 元素上时的样式 */
}
9. 子元素索引选择器：
li:nth-child(odd) {
/* 选择奇数位置的 li 元素 */
}
10. 伪元素选择器：
p::first-line {
/* 选择 p 元素的第一行 */
}
结构性伪类：
11. :first-child 伪类：
p:first-child {
/* 选择父元素中的第一个 p 元素 */
}
12. :last-child 伪类：
p:last-child {
/* 选择父元素中的最后一个 p 元素 */
}
13. :nth-of-type 伪类：
p:nth-of-type(2) {
/* 选择父元素中的第二个 p 元素 */
}
结构性伪元素：
14. ::before 伪元素：
p::before {
/* 在每个 p 元素之前插入内容 */
}
15. ::after 伪元素：
p::after {
/* 在每个 p 元素之后插入内容 */
}
这只是CSS选择器的一小部分，有很多其他高级和复杂的选择器可以用于更精确地选择页面上的元素。深入了解这些选择器将帮助你更灵活地控制页面样式。
转载请注明出处：http://www.zyzy.cn/article/detail/4035/CSS