什么是CSS 选择器？都有哪些？

CSS 选择器是 CSS 样式表中最重要的部分之一。它们允许你精确地选择 HTML 文档中的元素，并应用样式。理解和掌握 CSS 选择器是成为一名优秀的前端开发者的关键。

.my-class {
font-size: 18px;
}


3. **ID 选择器**：选择具有特定 ID 的元素。例如，`#my-id` 选择器将选择具有 `my-id` ID 的元素。```css
#my-id {background-color: yellow;
}

后代选择器：选择某个元素的所有后代元素。例如，div p 选择器将选择所有在 <div> 元素内的 <p> 元素。
```
div p {line-height: 1.5;
}
```
子元素选择器：选择某个元素的直接子元素。例如，ul > li 选择器将选择所有直接在 <ul> 元素内的 <li> 元素。
```
ul > li {list-style: none;
}
```
相邻兄弟选择器：选择紧跟在某个元素后面的兄弟元素。例如，p + span 选择器将选择所有紧跟在 <p> 元素后面的 <span> 元素。
```
p + span {font-weight: bold;
}
```
一般兄弟选择器：选择某个元素后面的所有兄弟元素。例如，p ~ span 选择器将选择所有在 <p> 元素后面的 <span> 元素。
```
p ~ span {color: red;
}
```

存在和值选择器：选择具有特定属性或属性值的元素。例如，[href] 选择器将选择所有具有 href 属性的元素，而 [href="https://www.google.com"] 选择器将选择所有 href 属性值为 https://www.google.com 的元素。
```
[href] {text-decoration: none;
}[href="https://www.google.com"] {color: green;
}
```
部分值选择器：选择属性值包含特定字符串的元素。例如，[class~="my-class"] 选择器将选择所有类名中包含 my-class 字符串的元素。
```
[class~="my-class"] {border: 1px solid black;
}
```

:hover：选择鼠标悬停在其上的元素。例如，a:hover 选择器将选择所有鼠标悬停在其上的 <a> 元素。
```
a:hover {color: red;
}
```
:active：选择正在被激活的元素。例如，button:active 选择器将选择所有正在被点击的 <button> 元素。
```
button:active {background-color: gray;
}
```
:focus：选择当前有焦点的元素。例如，input:focus 选择器将选择所有当前有焦点的 <input> 元素。
```
input:focus {outline: none;border: 2px solid blue;
}
```
:nth-child()：选择某个元素的第 n 个子元素。例如，ul li:nth-child(2) 选择器将选择所有 <ul> 元素中的第二个 <li> 元素。
```
ul li:nth-child(2) {background-color: lightgray;
}
```

::before：在元素的内容之前插入生成的内容。例如，p::before 选择器将在所有 <p> 元素的内容之前插入生成的内容。
```
p::before {content: '>';font-size: 20px;color: red;
}
```
::after：在元素的内容之后插入生成的内容。例如，p::after 选择器将在所有 <p> 元素的内容之后插入生成的内容。
```
p::after {content: '<';font-size: 20px;color: red;
}
```

:first-child：选择某个元素的第一个子元素。例如，ul li:first-child 选择器将选择所有 <ul> 元素中的第一个 <li> 元素。
```
ul li:first-child {font-weight: bold;
}
```
:last-child：选择某个元素的最后一个子元素。例如，ul li:last-child 选择器将选择所有 <ul> 元素中的最后一个 <li> 元素。
```
ul li:last-child {border-bottom: none;
}
```