CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。以下是一些主要的 CSS 选择器及其使用方式：
元素选择器
选择所有指定类型的元素。
css
p {
color: red;
}
这将选择所有的 <p> 元素，并将它们的文本颜色设置为红色。
- 类选择器
选择具有指定类的元素。类选择器以点（.）开头。
css
.myClass {
font-size: 20px;
}
在 HTML 中，你可以这样使用它：<div class="myClass">这是一个类为 myClass 的 div。</div>
- ID 选择器
选择具有指定 ID 的元素。ID 选择器以井号（#）开头。
css
#myID {
background-color: yellow;
}
在 HTML 中，你可以这样使用它：<div id="myID">这是一个 ID 为 myID 的 div。</div>
注意：ID 在页面上应该是唯一的。
- 属性选择器
选择具有指定属性的元素。
* 选择具有指定属性的元素：
```css
input[type="text"] {
width: 200px;
}
```
* 选择具有指定属性和值的元素：
```css
a[href="https://example.com"] {
color: blue;
}
```
* 选择属性值包含某个字符串的元素：
```css
a[href*="example"] {
font-weight: bold;
}
```
伪类选择器
选择 HTML 元素的特定状态。
* `:hover`：选择鼠标指针浮动在上面的元素：
```css
button:hover {
background-color: green;
}
```
* `:active`：选择被用户激活的元素（如鼠标点击并按住不放）：
```css
button:active {
color: white;
}
```
* `:first-child`：选择属于其父元素的第一个子元素：
```css
p:first-child {
color: purple;
}
```
* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。
伪元素选择器
选择元素的特定部分，并为其添加样式。
* `::before`：在元素内容之前插入内容：
```css
p::before {
content: "Read this - ";
color: blue;
}
```
* `::after`：在元素内容之后插入内容：
```css
p::after {
content: " - End";
color: red;
}
```
以上只是 CSS 选择器的一部分。实际上，CSS 还提供了许多其他选择器，如组合选择器（如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器）等。这些选择器可以帮助你更精确地选择并样式化 HTML 元素。