>[danger] Css选择器和选择器优先级，Css连接器有哪些？如何影响选择器优先级?  >[danger]Css中的连接器有哪些？ CSS 连接器（也称为选择器组合符号）是用于组合两个或多个 CSS 选择器的符号，以便选择特定的 HTML 元素。常见的 CSS 连接器有以下几种： 1. 空格选择器（Descendant Selector）：用空格分隔两个选择器，选中第一个选择器所匹配的元素下所有满足第二个选择器的后代元素。 ```css /* 选中 .container 下所有的 p 元素 */ .container p { /* 样式 */ } ``` 2. 相邻同胞选择器（Adjacent Sibling Selector）：使用 `+` 符号分隔两个选择器，选中紧接在第一个选择器所匹配的元素后面的第一个满足第二个选择器的兄弟元素。 ```css /* 选中 h1 元素后面紧跟着的 p 元素 */ h1 + p { /* 样式 */ } ``` 3. 通用同胞选择器（General Sibling Selector）：使用 `~` 符号分隔两个选择器，选中所有紧接在第一个选择器所匹配的元素后面的满足第二个选择器的兄弟元素。 ```css /* 选中 .container 下所有紧跟着 h1 元素后面的 p 元素 */ .container h1 ~ p { /* 样式 */ } ``` 4. 子元素选择器（Child Selector）：使用 `>` 符号分隔两个选择器，选中第一个选择器所匹配的元素的子元素中所有满足第二个选择器的元素。 ```css /* 选中 .container 下所有直接子元素中的 p 元素 */ .container > p { /* 样式 */ } ``` >[danger]Css中如何计算选择器优先级? CSS 选择器的优先级是根据选择器的特定性（Specificity）来计算的。特定性是一个四元组 `[a, b, c, d]`，其中： - `a` 表示行内样式的数量； - `b` 表示 ID 选择器的数量； - `c` 表示类选择器、属性选择器和伪类选择器的数量； - `d` 表示元素选择器和伪元素选择器的数量。 优先级的计算规则如下： 1. 如果存在行内样式，则特定性为 `[1, 0, 0, 0]`。 2. 否则，对于每个选择器，计算其特定性并相加，得出总的特定性值。 3. 如果多个选择器的特定性值相同，则后面的选择器优先级高。 4. 如果两个选择器的特定性值不同，则优先级高的选择器具有更高的优先级。 例如，以下选择器的优先级从高到低依次为： ```css /* 特定性为 [0, 1, 1, 1] */ #header .nav li a:hover /* 特定性为 [0, 1, 2, 0] */ #header .nav li /* 特定性为 [0, 0, 3, 0] */ .nav-item.active /* 特定性为 [0, 0, 2, 1] */ a[href="#"] /* 特定性为 [0, 0, 0, 1] */ p:first-of-type ``` 总的来说，选择器的特定性和优先级都是很重要的概念，在编写 CSS 样式时需要考虑到它们以避免产生样式污染和覆盖等问题。