【CSS 面经】CSS选择器及其优先级

CSS选择器和优先级是每个前端开发人员必须掌握的基础知识。CSS选择器定义了如何选择和应用样式到HTML元素，而优先级则决定了在有多个规则作用于同一元素时，哪个规则会生效。理解并掌握CSS选择器和优先级，不仅能帮助你写出更简洁、高效的样式表，还能在面试中给出清晰、准确的回答。本文将详细介绍CSS选择器的种类、优先级的计算规则以及常见面试问题的解答。

一、CSS选择器的基本概念

1. 选择器的作用

CSS选择器是用来选中页面中某个元素的方式。它可以选中一个或多个元素，并为这些元素应用样式。常见的选择器有很多种，包括基本选择器、组合选择器、伪类选择器和伪元素选择器等。每种选择器有不同的应用场景，灵活运用可以提高代码的可维护性和效率。

2. 基本选择器

• 通配符选择器 (*)：选中所有元素。

  * {
  color: red;
  }
  

​ 上述代码会将页面中的所有文本颜色设为红色。

• 类型选择器 (element)：选中所有指定类型的元素。

  p {
    font-size: 16px;
  }
  

  这段代码将所有<p>元素的字体大小设为16像素。

• 类选择器 (.class)：选中所有具有指定类名的元素。

  .container {
    margin: 0 auto;
  }
  

  这段代码将所有类名为container的元素的外边距设为居中。

• ID选择器 (#id)：选中具有指定ID的元素。

  #header {
    background-color: blue;
  }
  

  这段代码将ID为header的元素背景色设为蓝色。

3. 组合选择器

• 后代选择器 (space)：选中某个元素内的所有指定后代元素。

  div p {
    color: green;
  }
  

  这段代码会将所有<div>内的<p>元素字体颜色设为绿色。

• 子元素选择器 (>)：选中某个元素的直接子元素。

  div > p {
    font-weight: bold;
  }
  

  这段代码会将所有<div>的直接子元素<p>的字体设为加粗。

• 相邻兄弟选择器 (+)：选中紧跟在某元素后的兄弟元素。

  h1 + p {
    margin-top: 0;
  }
  

  这段代码会将紧跟在<h1>元素后的第一个<p>元素的上边距设为0。

• 通用兄弟选择器 (~)：选中某元素之后的所有兄弟元素。

  h1 ~ p {
    color: blue;
  }
  

  这段代码会将所有在<h1>之后的<p>元素的文字颜色设为蓝色。

二、CSS选择器的优先级

1. 优先级的概念

当多个CSS规则应用到同一个元素时，浏览器会根据规则的优先级决定最终生效的样式。选择器的优先级越高，它所定义的样式就越有可能覆盖其他选择器的样式。

2. 计算优先级的方法

CSS优先级的计算规则基于以下几条原则：

• 每个选择器都可以被分解为不同类型的部分（ID、类、类型等），每个部分都有一个权重。
• ID选择器的优先级最高，每个ID选择器的优先级为100。
• 类选择器、伪类选择器的优先级为10。
• 类型选择器（元素选择器）和伪元素选择器的优先级为1。
• 通配符选择器和继承的样式优先级为0。

在计算优先级时，浏览器会根据选择器的具体组成来计算出一个数值。这个数值越大，优先级越高。

3. 优先级的计算示例

假设我们有如下CSS规则：

#header {
  color: red;
}

.container {
  color: green;
}

div {
  color: blue;
}

我们计算这三个选择器的优先级：

• #header：ID选择器，优先级为100。
• .container：类选择器，优先级为10。
• div：类型选择器，优先级为1。

当这三个规则同时作用于同一个元素时，#header的规则会生效，因为它的优先级最高。

4. 选择器优先级的加法规则

如果一个规则由多个选择器组成（例如组合选择器），那么它们的优先级会加起来。例如：

#header .container div {
  color: yellow;
}

这个规则由三个选择器组成：

• #header：ID选择器，优先级为100。
• .container：类选择器，优先级为10。
• div：类型选择器，优先级为1。

所以，这个规则的总优先级是 100 + 10 + 1 = 111。

5. 内联样式的优先级

内联样式的优先级非常高，它的优先级是1000。因此，内联样式会覆盖外部样式表中的样式，即使外部样式表中的规则优先级较高。

<p style="color: red;">This is a red paragraph.</p>

在这个例子中，<p>元素的文字颜色会被内联样式的color: red;所覆盖，外部样式表中的规则无效。

三、常见面试问题及回答

1. 如何判断哪个CSS规则会生效？

判断一个CSS规则是否生效，可以通过计算选择器的优先级来决定。具体规则是：

• 内联样式 > ID选择器 > 类选择器 > 元素选择器。
• 如果多个选择器优先级相同，则根据它们在CSS中的顺序应用规则，后面的规则优先级更高。

2. ID选择器和类选择器有什么区别？

• ID选择器使用#符号，能够唯一标识页面中的一个元素，优先级较高。
• 类选择器使用.符号，可以应用于多个元素，优先级低于ID选择器。

3. 什么是层叠性？

层叠性是CSS的一个重要特性，它允许多个样式规则应用于同一个元素，并决定哪些样式会生效。层叠性基于规则的优先级、选择器的特性以及规则在样式表中的顺序。

4. 如何使用!important？

!important是一个特殊的标记，它可以提高某个规则的优先级，使其覆盖其他同样选择器的规则。它的优先级高于所有其他规则，但应避免滥用，因为它会增加样式的复杂性。

p {
  color: blue !important;
}

在这种情况下，<p>元素的文本颜色将永远是蓝色，除非有更高优先级的内联样式。

推荐：

• JavaScript
• react
• vue