【CSS】CSS 选择器及其权重

基本选择器

1. 元素选择器（Element Selector）：使用 HTML 元素的标签名作为选择器，选取匹配的元素。
   eg：p { } 选取所有 <p> 元素。
2. 类选择器（Class Selector）：使用类名选择元素，以 . 开头。
   eg：.highlight { } 选取所有具有 highlight 类名的元素。
3. ID 选择器（ID Selector）：使用元素的唯一标识符 ID 选择元素，以 # 开头。
   eg：#myElement { } 选取具有 ID 为 myElement 的元素。
   注意：因为 id 应该是唯一的，所以匹配的元素通常只有一个。
4. 通用选择器（Universal Selector）：选择所有元素。
   eg：* { } 选择所有元素。

属性选择器

1. [attr]：选择具有指定属性的元素。
   eg：[href] 选择所有具有 href 属性的元素。
2. [attr=value]：选择具有指定属性且属性值与给定值完全匹配的元素。
   eg：[type="text"] 选择所有 type 属性值为 “text” 的元素。
3. [attr^=value]：选择具有指定属性且属性值以给定值开头的元素。
   eg：[href^="https://"] 选择所有 href 属性值以 “https://” 开头的元素。
4. [attr$=value]：选择具有指定属性且属性值以给定值结尾的元素。
   eg：[src$=".jpg"] 选择所有 src 属性值以 “.jpg” 结尾的元素。
5. [attr*=value]：选择具有指定属性且属性值包含给定值的元素。
   eg：[alt*="flower"] 选择所有 alt 属性值包含 “flower” 的元素。
6. [attr~=value]：选择具有指定属性且属性值包含指定值的元素，属性值是由空格分隔的单词列表。
   eg：[class~="red"] 选择所有具有 class 属性且属性值包含单词 “red” 的元素。

复合选择器

• 复合选择器可以由多个简单选择器组合而成，简单选择器之间没有空格或其他字符分隔。
• 复合选择器的各个简单选择器之间是并列关系，即同时满足所有简单选择器的条件的元素才会被选中。

常见的复合选择器包括：

• 元素选择器和类选择器的组合，例如 p.desc 表示选择所有具有类名为 “desc” 的 <p> 元素。
• 元素选择器和 ID 选择器的组合，例如 div#container 表示选择 ID 为 “container” 的 <div> 元素。
• 类选择器和属性选择器的组合，例如 .btn[data-disabled="true"] 表示选择具有属性 data-disabled 值为 “true” 的带有类名为 “btn” 的元素。
• 多个类选择器的组合，例如 .btn.primary 表示选择同时具有类名 “btn” 和 “primary” 的元素。

选择器组合

1. 并列选择器（comma-separated selector）：使用逗号将多个选择器组合在一起，选择符合任一选择器的元素。
   eg：h1, h2, h3 选择所有 h1、h2 和 h3 元素。
2. 后代选择器（descendant combinator）：使用空格将两个选择器组合在一起，选择作为后代的元素。
   eg：ul li 选择所有在 ul 元素内的 li 元素。
3. 子选择器（child combinator） ：使用大于号（>）将两个选择器组合在一起，选择作为直接子元素的元素。
   eg：ul > li 选择所有作为 ul 元素直接子元素的 li 元素。
4. 相邻兄弟选择器（adjacent sibling combinator）：使用加号（+）将两个选择器组合在一起，选择紧接在指定元素之后的兄弟元素。
   eg：h1 + p 选择紧接在 h1 元素后面的 p 元素。
5. 一般兄弟选择器（general sibling combinator）：用波浪号（~）将两个选择器组合在一起，选择在指定元素后面的所有兄弟元素。
   eg：h1 ~ p 选择在 h1 元素后面的所有 p 元素。

• 浏览器会 [从右往左] 解析组合选择器，这样可以更快地缩小匹配范围，提高选择器的性能。

伪类选择器

伪类选择器可以根据元素的特定状态或特征来选择元素，以冒号（:）作为标识符。

普通伪类选择器

1. :hover：选择被鼠标悬停在上方时的元素。
2. :active：选择被激活或被点击时的元素。
3. :not(selector)：选择不匹配指定选择器的元素。
4. :checked：选择被选中的复选框或单选按钮元素。
5. :focus：选择当前获取焦点的元素。
6. :focus-within {}：选择包含有焦点元素的父元素。
7. :link {}：选择尚未被访问的链接。
8. :visited {}：选择已经被访问过的链接。

• 对于链接标签，伪类必须按 visited → hover → active 的顺序编写才能正常展示。link 的编写顺序没有要求。

结构性伪类选择器

1. :first-child：选择父元素中的第一个子元素。
2. :last-child：选择父元素中的最后一个子元素。
3. :nth-child(n)：选择父元素中的第 n 个子元素。可以使用具体的数字、关键字（odd / even）或公式来指定要选择的子元素。
4. :nth-last-child(n)：与 :nth-child 类似，但是从最后一个子元素开始计数。

1. :first-of-type {}：选择父元素中具有特定类型的第一个子元素。
2. :last-of-type {}：选择父元素中具有特定类型的最后一个子元素。
3. :nth-of-type(n)：选择父元素中特定类型的第 n 个子元素。
4. :nth-last-of-type(n)：与 :nth-of-type 类似，但是从最后一个具有相同类型的子元素开始计数。

• even / 2n 表示序号为偶数的元素。
• odd / 2n + 1 表示序号为奇数的元素。

区分 xxx-child(n) & xxx-of-type(n)：
无论是否满足选择器的条件，nth-child(n) 都会计算。所以 不满足条件的元素，不会生效选择器的样式
而 nth-of-type(n) 只会计算满足选择器条件的元素。所以 被选中的元素，一定会生效选择器的样式

p:nth-of-type(2n + 1) {
    /* 奇数段 */
    color: blue;
    font-weight: 700;
}

p:nth-child(odd) {
    /* 奇数段 */
    background: lightpink;
}

<div>这段不参与 nth-of-type 的计数、却是 nth-child 的第一段</div>
<p>nth-of-type 的第一段、nth-child 的第二段</p>
<p>nth-of-type 的第二段、nth-child 的第三段</p>
<div>这段不参与 nth-of-type 的计数、却是 nth-child 的第四段</div>
<p>nth-of-type 的第三段、nth-child 的第五段</p>
<p>nth-of-type 的第四段、nth-child 的第六段</p>

伪元素选择器

伪元素选择器以双冒号 :: 开头。

以下是一些常用的伪元素选择器：

1. ::before：在元素内容的前面插入生成的内容。
2. ::after：在元素内容的后面插入生成的内容。
3. ::first-line：选择元素内容的第一行。
4. ::first-letter：选择元素内容的第一个字母。
5. ::selection：选择用户选择的文本部分。
6. ::placeholder：用于选择表单元素的占位符文本。

使用伪元素选择器 ::before 和 ::after 时，需要通过 CSS 的 content 属性定义生成的内容。

p::before {
    content: '';
    background: wheat;
    display: block;
    width: 20px;
    height: 20px;
}

• 即使该伪元素不需要内容，也要设置 content 属性，此时属性值为空字符串 ""。
• ::before 和 ::after 生成的伪元素默认为内联元素，即 display: inline。
• ::before 和 ::after 不能同时应用于同一个元素（img::after::before ×）。

选择器的权重 (面试考点)

CSS Specificity 使用元组计算权重值，具体规则如下：

1. ID 选择器，对应（1, 0, 0）的权重。
2. 类选择器、属性选择器、伪类选择器，对应（0, 1, 0）的权重。
3. 元素选择器、伪元素选择器，对应（0, 0, 1）的权重。

• 同一行的选择器会叠加其权重值：

/* 规则 1 */
div h1 {
    color: blue;
}

/* 规则 2 */
h1 {
    color: red;
}

规则 1 的权重值为（0, 0, 2），而规则 2 的权重值为（0, 0, 1）。因此，div 下的 h1 将显示为 blue。

/* 规则 1 */
div h1 {
    color: blue;
}

/* 规则 2 */
h1.red {
    color: red;
}

规则 1 的权重值为（0, 0, 2），而规则 2 的权重值为（0, 1, 1）。因此，h1 将显示为 red。

• 如果权重值相同，则看样式编写的方式：行间样式 > 内联样式 > 外联样式

• 如果样式编写的方式也一样，则看样式编写的位置：下面的 > 上面的

• 可以使用 !important 设置样式的权重值为 infinity (无穷大)。

p {
    background: #ccc !important;
}