CSS面试：选择器及其优先级选择器的优先级由以下几个因素决定，从高到低排列如下：内联样式（例如：style="colo

从高到低排列如下：

内联样式（例如：style="color: red;"）：1000
ID 选择器（例如：#example）：100
类选择器、伪类、属性选择器（例如：.example, :hover, [type="text"]）：10
元素选择器、伪元素（例如：div, p, ::before）：1
通配符选择器、子选择器、相邻兄弟选择器、一般兄弟选择器（例如：``, >, +, ~）：0（这些选择器本身不增加优先级）

在 CSS 中，类选择器本身没有不同的种类，它只是根据类名选择元素。不过，根据选择器的组合方式或应用方式，可以有以下几种常见的使用方式：

单类选择器:
- 选择具有特定类名的元素。
- 示例：.highlight { color: red; }
组合类选择器:
- 同时选择多个类的元素，即一个元素必须同时具有所有指定的类。
- 示例：.highlight.important { color: red; font-weight: bold; }
后代选择器:
- 选择具有特定类名的元素，该元素是另一个元素的后代。
- 示例：.container .item { color: blue; }，选择所有 .container 内部的 .item。
子选择器:
- 选择具有特定类名的元素，该元素是另一个元素的直接子元素（直接的子元素，附庸的附庸不是我的附庸）。
- 示例：.container > .item { color: green; }，选择 .container 的直接子元素 .item。
并集选择器:
- 选择多个类选择器的并集，即任意一个类名匹配的元素。
- 示例：.highlight, .important { color: red; }，选择 .highlight 和 .important 类的元素。
兄弟选择器：

兄弟选择器用于选择同一个父元素下的兄弟元素。主要有两种类型的兄弟选择器：

相邻兄弟选择器 (+)

普通兄弟选择器 (~)

<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>
<p>分割线</p>
<div>Fourth Div</div>
<div>Fifth Div</div>

使用 + 相邻兄弟选择器：

div + div {
  color: red;
}

结果：

效果：

使用 ~ 一般兄弟选择器：

div ~ div {
  color: blue;
}

结果：

div ~ div 选择某个 div 元素之后的所有兄弟 div 元素（无论中间有没有其他类型的元素）。
Second Div, Third Div, Fourth Div, Fifth Div 都会被选中，因为它们都是在 First Div 之后的兄弟 div 元素。

效果：

总结：

div + div 只会选择紧跟在另一个 div 元素之后的 div，因此在这个例子中，它不会选择 Fourth Div，因为中间插入了一个 <p> 元素。
div ~ div 选择的是在指定 div 元素之后的所有兄弟 div 元素，所以即使中间有其他类型的元素插入，它也会选择到所有后续的 div 元素。

应用场景