选择器优先级

会根据选择器的类型、数量来进行优先级比较

选择器类型

会根据选择器类型来决定优先级

优先级由高到低如下：

  • 内联属性，即 style 属性上的样式

  • ID 选择器

  • 类选择器、属性选择器、伪类

  • 元素选择器、伪元素

:::caution

*,+,>,~, (空格),:not不会影响优先级

:::

优先应用拥有最高优先级选择器的样式，例如下面样式

1
2
3
4
5
6
#id .class {
  background-color: red;
}
.main .content .class {
  background-color: blue;
}

第一个有 ID 选择器和类选择器

第二个只有类选择器

所以第一个优先级高，背景色为红色 red

选择器数量

当选择器类型的优先级一致时，就要看最高优先级选择器的数量了

例如下面样式

1
2
3
4
5
6
div > section .class {
  background-color: red;
}
div .child .class {
  background-color: blue;
}

同时拥有类选择器和元素选择器

根据最高优先级选择器的数量决定优先级 .child .class > .class

所以第二个样式被应用，背景色为蓝色 blue

!important

如果属性后有 !important 标识

则无视选择器类型和数量，优先级为最高

1
2
3
4
5
6
.class a {
  color: red !important;
}
#id a {
  color: blue;
}

第一个样式会生效，文本颜色为红色 red

编写顺序

选择器优先级相同的前提下

在同一个样式文件内，权重相同的样式，最后面的样式优先级最高

可以理解成后面的会覆盖前面的

例如

1
2
3
4
5
6
#block {
  background-color: blue;
}
#block {
  background-color: red;
}

id="block" 的标签背景色为红色 red

资源顺序

选择器优先级相同的前提下

css 文件加载的顺序会决定优先级，后面加载的优先级会比前面的高，跟编写顺序一个道理

例如

1
2
3
4
/* a.css */
#block {
  background-color: red;
}
1
2
3
4
/* b.css */
#block {
  background-color: blue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css" />
    <!-- 先加载 a 后加载 b -->
    <link rel="stylesheet" href="./a.css" />
    <link rel="stylesheet" href="./b.css" />
    <title>Document</title>
    <style type="text/css"></style>
  </head>
  <body>
    <div class="block" id="block">2333</div>
  </body>
</html>

b.css 内的样式优先级高，标签的背景色为蓝色 blue

总结

  • 根据选择器选出优先级最高的样式

  • 再根据编写顺序选出单个文件内优先级最高的

  • 对于不同文件优先级一致的样式，后加载的文件优先级高