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

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

元素选择器：选择特定的 HTML 元素。例如，p 选择器将选择所有的 <p> 元素。
```
css">p {color: blue;
}
```
类选择器：选择具有特定类名的元素。例如，.my-class 选择器将选择所有具有 my-class 类名的元素。
```
css">
```

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


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

通配符选择器：选择所有元素。例如，* 选择器将选择文档中的所有元素。
```
css">* {margin: 0;padding: 0;
}
```

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

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

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

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

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