CSS选择器是用于选择HTML或XML文档中特定元素的模式或规则，根据元素的类型、属性、位置等条件来选择一个或多个元素，然后将样式规则应用于这些选定的元素。以下是CSS选择器的主要类型：
基础选择器：
复合选择器：
关系选择器：
属性选择器：根据元素的属性及其值来选择元素。
伪类选择器：用于选择HTML元素的特定状态，如:hover、:active、:first-child等。
伪元素选择器：用于选择元素的特定部分，例如::before和::after，用于在元素的内容前后插入内容。
额外的选择器：
这些选择器可以根据需要组合使用，以更精确地定位到需要应用样式的HTML元素。随着CSS版本的不断更新，新的选择器也不断涌现，以支持更复杂的样式需求。
当然，以下是一些CSS选择器的实例代码，用于演示如何在实际应用中使用它们：
- 基础选择器
元素选择器：
css
p {
color: blue;
}
类选择器：
css
.my-class {
font-size: 18px;
}
ID选择器：
css
#my-id {
background-color: yellow;
}
- 复合选择器
交集选择器：
css
p.my-class {
text-align: center;
}
并集选择器：
css
p, div, span {
margin: 10px;
}
- 关系选择器
子代选择器：
ul > li {
list-style-type: none;
}
后代选择器：
css
div li {
color: green;
}
相邻兄弟选择器：
css
div + p {
border-top: 1px solid black;
}
普通兄弟选择器：
css
div ~ p {
color: purple;
}
- 属性选择器
css
a[href] {
color: red;
}
input[type=“text”] {
border: 1px solid gray;
}
[disabled] {
opacity: 0.5;
}
- 伪类选择器
css
a:hover {
text-decoration: underline;
}
li:first-child {
font-weight: bold;
}
input:focus {
outline: none;
border: 2px solid blue;
}
- 伪元素选择器
css
p::before {
content: “Read this: “;
color: gray;
}
p::after {
content: “.”;
color: gray;
}
- 额外的选择器
否定选择器：
css
:not(.my-class) {
background-color: lightgray;
}
empty空选择器：
css
p:empty {
display: none;
}
:target选择器：
html
<a href=“#content”>Go to content</a>
<div id=“content”>
<p>This is the targeted content.</p>
</div>
css
#content:target {
background-color: lightblue;
}
:root根选择器：
:root {
–main-color: blue;
}
body {
background-color: var(–main-color);
}
这些代码示例只是CSS选择器用法的一部分，实际使用中可以根据需要进行组合和扩展，以满足更复杂的样式需求。请注意，这些选择器通常需要与HTML文档一起使用，以便在实际页面上看到效果。