请列举并解释你常用的 CSS 选择器，并说明它们的优先级是如何计算的？

推荐答案

我常用的 CSS 选择器及其优先级如下：

1. 元素选择器 (Type Selectors):

• 语法: element 例如：p, div, span, h1
• 作用: 选中所有指定类型的 HTML 元素。
• 优先级: 1

2. 类选择器 (Class Selectors):

• 语法: .className 例如：.container, .highlight
• 作用: 选中所有 class 属性包含指定类名的元素。
• 优先级: 10

3. ID 选择器 (ID Selectors):

• 语法: #idName 例如：#header, #main
• 作用: 选中拥有指定 id 属性的唯一元素（在一个页面中，ID 应该是唯一的）。
• 优先级: 100

4. 属性选择器 (Attribute Selectors):

• 语法: [attribute], [attribute=value], [attribute~=value], [attribute|=value], [attribute^=value], [attribute$=value], [attribute*=value]
• 作用: 基于元素的属性及其值进行选择。例如: [type="text"], [data-target].
• 优先级: 10

5. 通配符选择器 (Universal Selector):

• 语法: *
• 作用: 选中所有 HTML 元素。
• 优先级: 0

6. 后代选择器 (Descendant Combinator):

• 语法: ancestor descendant 例如：div p (选择 div 元素内的所有 p 元素)
• 作用: 选中指定祖先元素下的所有后代元素。
• 优先级: 基于参与选择器的优先级之和。

7. 子选择器 (Child Combinator):

• 语法: parent > child 例如：ul > li (选择 ul 元素下的直接 li 子元素)
• 作用: 选中指定父元素的直接子元素。
• 优先级: 基于参与选择器的优先级之和。

8. 相邻兄弟选择器 (Adjacent Sibling Combinator):

• 语法: prev + next 例如：h2 + p (选择紧跟 h2 元素后面的 p 元素)
• 作用: 选中指定元素后面的第一个兄弟元素。
• 优先级: 基于参与选择器的优先级之和。

9. 通用兄弟选择器 (General Sibling Combinator):

• 语法: prev ~ next 例如：h2 ~ p (选择 h2 元素后面所有的 p 兄弟元素)
• 作用: 选中指定元素后面的所有兄弟元素。
• 优先级: 基于参与选择器的优先级之和。

10. 伪类选择器 (Pseudo-classes):

• 语法: :pseudo-class 例如：:hover, :focus, :first-child, :last-child
• 作用: 选中元素的特殊状态。
• 优先级: 10

11. 伪元素选择器 (Pseudo-elements):

• 语法: ::pseudo-element 例如：::before, ::after, ::first-line, ::first-letter
• 作用: 选中元素的特定部分。
• 优先级: 10

优先级计算:

CSS 优先级是用来决定当多个规则应用于同一个元素时，哪个规则的样式会被应用。优先级基于以下几个规则进行计算：

1. 内联样式: 直接写在 HTML 标签里的 style 属性，拥有最高优先级 (1000)。
2. ID 选择器: 优先级为 100。
3. 类选择器、属性选择器和伪类选择器: 优先级为 10。
4. 元素选择器和伪元素选择器: 优先级为 1。
5. 通配符选择器: 优先级为 0。
6. 继承样式: 优先级最低。

组合选择器: 当存在组合选择器（后代，子，兄弟等）时，将组成选择器的各个部分分别计算优先级然后累加。例如 div.container p.text 的优先级是 (1 + 10) + (1 + 10) = 22

!important 声明: 在样式属性后添加 !important 声明，可以覆盖所有其他的规则（包括内联样式），但要谨慎使用，因为它会使 CSS 维护变得困难。

本题详细解读

CSS 选择器的分类

CSS 选择器主要分为以下几类，每种选择器都有其独特的用途和优先级：

1. 基础选择器:

   • 元素选择器: 用于选取 HTML 元素，例如 h1, p, div 等。
   • 类选择器: 用于选择带有特定类名的元素，例如 .container, .button。
   • ID 选择器: 用于选择拥有特定 ID 属性的元素，例如 #header, #main-content。
   • 通配符选择器: 用于选择所有元素，通常用于全局样式设置。

2. 属性选择器:

   • 属性选择器允许根据元素的属性值进行选择，例如 [type="text"] 选择 type 属性值为 text 的元素。

3. 组合选择器:

   • 后代选择器: 选择指定元素的所有后代元素，例如 div p 选择 div 元素内的所有 p 元素。
   • 子选择器: 选择指定元素的直接子元素，例如 ul > li 选择 ul 元素的直接 li 子元素。
   • 相邻兄弟选择器: 选择指定元素的下一个兄弟元素，例如 h2 + p 选择紧跟在 h2 之后的第一个 p 元素。
   • 通用兄弟选择器: 选择指定元素之后的所有兄弟元素，例如 h2 ~ p 选择所有跟在 h2 元素后面的 p 元素。

4. 伪类和伪元素选择器:

   • 伪类选择器: 用于选择元素的特殊状态，例如 :hover (鼠标悬停)，:focus (获得焦点)，:first-child (第一个子元素)，:last-child (最后一个子元素) 等。
   • 伪元素选择器: 用于选择元素的特定部分，例如 ::before (在元素之前插入内容)，::after (在元素之后插入内容)，::first-line (选择元素的第一行)，::first-letter (选择元素的第一个字母) 等。

CSS 优先级规则

CSS 优先级决定了当多个样式规则应用于同一个元素时，哪个规则将被应用。优先级计算是基于一个权重系统，具有更高的权重的规则将覆盖较低权重的规则。

• 优先级权重的概念:

  • 内联样式: 权重最高，直接写在 HTML 元素 style 属性中的样式。
  • ID 选择器: 权重高于类选择器、属性选择器、伪类选择器和元素选择器。
  • 类选择器、属性选择器、伪类选择器: 权重高于元素选择器和伪元素选择器。
  • 元素选择器和伪元素选择器: 权重低于类选择器，属性选择器和伪类选择器。
  • 通配符选择器: 权重最低。

• 组合选择器的优先级计算: 组合选择器(后代，子，兄弟等)的优先级是组合的各个选择器优先级值相加计算的结果。

• !important 声明: !important 声明会覆盖所有其他的声明（包括内联样式），但需要谨慎使用，因为它会使样式规则的覆盖关系变得复杂，难以维护。

实践建议

1. 合理使用选择器: 避免过于具体的选择器，尽量使用类选择器和后代选择器，减少对 ID 选择器的依赖，避免过度使用 !important。
2. 理解优先级: 明确 CSS 优先级的计算规则，这样可以更好地调试 CSS 代码。
3. 遵循样式表组织规范: 将样式规则有逻辑地分组，并且尽量避免不同层级的样式冲突。
4. 养成良好的 CSS 编码习惯: 编写可维护，可复用的 CSS 代码。
5. 使用开发者工具: 浏览器开发者工具可以帮助你查看元素的样式应用情况以及哪些规则生效，哪些规则被覆盖，从而更好地理解 CSS 优先级。