选择器的种类
1. 基本选择器
ID选择器：选中具有指定ID的单个元素。ID在页面中应该是唯一的。
```
#my-id {
background-color: yellow;
}
```
类选择器：选中所有具有指定类名的元素。
```
.my-class {
font-size: 16px;
}
```
元素选择器：选中所有指定的HTML元素。
```
p {
color: blue;
}
```
通配符选择器：选中所有元素。
```
* {
margin: 0;
padding: 0;
}
```
优先级依次降低
2. 组合选择器
后代选择器：选中指定元素的所有后代元素。
```
div p {
color: green;
}
```
子元素选择器：选中指定元素的直接子元素。
```
ul > li {
list-style-type: none;
}
```
相邻兄弟选择器：选中紧接在指定元素后的兄弟元素。
```
h2 + p {
margin-top: 0;
}
```
一般兄弟选择器：选中指定元素后的所有兄弟元素。
```
h2 ~ p {
color: red;
}
```
没有特定的优先级 在不同组合不同的优先级
3. 属性选择器
存在属性选择器：选中具有指定属性的元素。
```
[type] {
border: 1px solid black;
}
```
特定属性值选择器：选中具有指定属性和特定值的元素。
```
[type="text"] {
background-color: lightgray;
}
```
属性值前缀选择器：选中具有指定属性且值以特定字符串开头的元素。
```
[href^="https"] {
color: green;
}
```
属性值后缀选择器：选中具有指定属性且值以特定字符串结尾的元素。
```
[href$=".pdf"] {
color: red;
}
```
属性值包含选择器：选中具有指定属性且值包含特定字符串的元素。
```
[class*="btn"] {
padding: 10px;
}
```
4. 伪类选择器
:hover：选中鼠标悬停时的元素。
```
a:hover {
color: red;
}
```
:first-child：选中指定元素的第一个子元素。
```
p:first-child {
font-weight: bold;
}
```
:last-child：选中指定元素的最后一个子元素。
```
p:last-child {
font-style: italic;
}
```
:nth-child(n) ：选中指定元素的第n个子元素。
```
li:nth-child(2) {
color: blue;
}
```
:not(selector) ：选中不匹配指定选择器的元素。
```
div:not(.exclude) {
border: 1px solid black;
}
```
5. 伪元素选择器
::before：在元素内容之前插入内容。
```
p::before {
content: "Note: ";
font-weight: bold;
}
```
::after：在元素内容之后插入内容。
```
p::after {
content: " (end)";
}
```
优先级的计算规则
-
内联样式（
style属性）：优先级最高。<p style="color: red;">Hello</p> -
ID选择器：优先级次高。
#my-id { color: blue; } -
类选择器、属性选择器和伪类选择器：优先级中等。
.my-class { color: green; } [type="text"] { border: 1px solid black; } a:hover { color: orange; } -
元素选择器和伪元素选择器：优先级最低。
p { color: purple; } p::before { content: "Prefix: "; }
优先级具体计算
优先级是通过以下四个值来计算的：
- 内联样式：
1000（因为内联样式具有最高优先级） - ID选择器：
0100（每个ID选择器增加100的优先级） - 类选择器、属性选择器和伪类选择器：
0010（每个增加10的优先级） - 元素选择器和伪元素选择器：
0001（每个增加1的优先级）
这些值的计算方式如下：
- 内联样式：
1000 - ID选择器：
0100 - 类选择器、属性选择器和伪类选择器：
0010 - 元素选择器和伪元素选择器：
0001
计算优先级的例子
假设有以下CSS规则：
/* 优先级：0001 */
p {
color: blue;
}
/* 优先级：0010 */
.my-class {
color: green;
}
/* 优先级：0100 */
#my-id {
color: red;
}
/* 优先级：1000 */
<div style="color: purple;">Hello</div>
如果这些规则都应用到一个<p>元素上，优先级从高到低的顺序是：
- 内联样式（
color: purple） - ID选择器（
color: red） - 类选择器（
color: green） - 元素选择器（
color: blue）
因此，<p>元素的最终颜色是紫色，因为内联样式具有最高优先级。
优先级不能同级相加，只能跨级相加，再多低级的选择器比不过上一级的一个选择器（不能跨越阶级）
特殊的important
在CSS中有一个传说，只要它出现谁也拦不住。加上!important会覆盖所有的选择器，谁来都不好使。
-
提高优先级：
!important可以覆盖所有选择器规则，甚至是ID选择器和内联样式。使用时应慎重考虑。 -
样式的维护性：过度使用
!important会使CSS的维护变得困难，因为它打破了自然的优先级规则，可能导致样式冲突难以追踪和解决。 -
应对特定问题：
!important常用于解决特定的样式覆盖问题，比如在第三方库或框架中调整样式，或在调试阶段。 -
避免滥用：在正常情况下，最好通过合理设计选择器的优先级和结构来解决样式问题，而不是依赖
!important。
