CSS选择器的权重和优先级整理，看看你知道吗？

引言

CSS选择器是一种用于选择HTML文档中特定元素的语法。它们可以根据元素的标签名、类名、ID、属性等特征来定位元素，并对其应用样式。CSS选择器的作用是使我们能够更精确地控制页面元素的样式和布局，从而实现更好的用户体验。通过使用CSS选择器，我们就可以轻松地改变页面的外观和行为，使其更符合设计要求。因此，熟练掌握CSS选择器是网页开发中非常重要的一部分。

而理解选择器的权重和优先级是构建一致且具有可维护性的样式表的基础。选择器的权重规则定义了不同选择器的优先级，决定了哪些样式规则将应用于特定元素。这种规则对于避免样式冲突和有效管理样式变得至关重要。除此之外，优先级规则则指导着如何设置样式的优先级，从而确保所需样式能正确地应用到页面元素上。

让我们一起来了解一下选择器的权重和优先级吧~

选择器权重

当多个样式规则应用于同一个元素时，浏览器需要决定哪个样式规则应该被优先应用。这就是选择器权重的概念。

CSS选择器权重是根据选择器的类型和数量来计算的。选择器的类型包括ID选择器、类选择器、属性选择器、伪类选择器、标签选择器、伪元素选择器、兄弟选择器、子选择器、后代选择器和通配符选择器。每个选择器类型都有一个与之关联的权重值：

ID选择器: 权重为100
类选择器: 权重为10
属性选择器: 权重为10
伪类选择器: 权重为10
标签选择器: 权重为1
伪元素选择器: 权重为1
兄弟选择器: 权重为0
子选择器: 权重为0
后代选择器: 权重为0
通配符选择器: 权重为0

如上所述。在计算选择器权重时，每个选择器的权重值会相加，从而得出总的选择器权重值。

让我们来解释一下：当多个样式规则应用于同一个元素时，浏览器会根据选择器的权重值来决定哪个样式规则应该被应用，例如，如果有一个ID选择器和一个类选择器同时定义了相同的样式，ID选择器的样式将会覆盖类选择器的样式。但是，如果多个规则具有相同的权重值，则最后一个规则将被应用。例如：

css 复制代码

h1 {  
    color: blue;  
    font-size: 24px;  
}  
   
h1 {  
    color: red;  
}

由于两个规则的选择器权重都是1，即标签选择器的权重，因此最后一个规则将被应用，即h1元素的颜色将是红色。如果两个规则的选择器权重不同，则权重较高的规则将被优先应用。

不过为了使CSS规则更易于维护，应当尽量避免使用具有较高权重值的选择器。尽可能使用标签选择器或类选择器，以确保选择器的权重尽可能低。当需要使用ID选择器时，应尽量保持其数量较少，以防止过多的权重值累加。而在CSS选择器的使用中，我们需要根据实际情况来平衡选择器的权重和样式的优先级，来实现最佳的样式效果。

优先级规则

!important: 具有最高优先级
内联样式: 内嵌于HTML元素的样式
ID选择器: 高优先级
类选择器/伪类选择器/属性选择器: 中优先级
标签选择器/伪元素选择器: 低优先级

我们在权重里提到过，如果多个规则具有相同的权重值，则最后一个规则将被应用。但是就这么简单嘛？如果多个样式规则用于同一个元素而且权重又相同呢？我们应该如何应用？

没错，这就是优先级规则的作用，在CSS中，如果多个样式规则应用于同一个元素，则根据选择器的权重来决定哪个样式规则应该被应用。但是，如果多个规则具有相同的选择器权重，则根据优先级规则来决定哪个样式规则应该被应用。

而优先级规则是根据CSS选择器的类型和数量来计算的。在优先级规则中，!important具有最高优先级，内联样式具有第二高的优先级，ID选择器具有第三高的优先级，而类选择器、伪类选择器和属性选择器具有中等优先级，标签选择器和伪元素选择器具有最低优先级。也就是：

!important: 具有最高优先级
内联样式: 内嵌于HTML元素的样式
ID选择器: 高优先级
类选择器/伪类选择器/属性选择器: 中优先级
标签选择器/伪元素选择器: 低优先级

在计算优先级时，将每个选择器的优先级值相加，从而得出总的优先级值。如果多个规则的优先级值相同，则根据优先级顺序来覆盖，如果你没看太明白，我再扩展写一下：

!important具有最高优先级，将覆盖其他规则的样式。
内联样式具有第二高的优先级，将覆盖外部和嵌入样式表中的所有选择器。
ID选择器具有第三高的优先级，将覆盖类选择器、伪类选择器和属性选择器的样式。
类选择器、伪类选择器和属性选择器具有中等优先级，将覆盖标签选择器和伪元素选择器的样式。
标签选择器和伪元素选择器具有最低优先级，将被其他选择器的样式所覆盖。

这样你应该就知道，在优先值相同时应该是怎样覆盖了。

不过需要注意的是，虽然!important具有最高优先级，但滥用!important可能会导致代码难以维护和理解。因此，在编写CSS代码时我们应该尽量避免使用!important，而应采用合理的选择器和样式结构来管理CSS样式。同时，也应尽可能避免使用具有高优先级的选择器，以确保样式能够正确地应用到页面元素上。

示例说明

让我们一起来看一个使用示例，展示各种选择器的权重和优先级是如何相互影响的吧：

html 复制代码

<p class="text" id="paragraph">Hello World!</p>  
   
<style>  
    /* 选择器权重为 0, 1, 1 */  
    p {  
        color: red;  
    }  
  
    /* 选择器权重为 0, 1, 2 */  
    #paragraph {  
        color: blue;  
    }  
  
    /* 选择器权重为 0, 2, 0 */  
    .text {  
        color: green;  
    }  
  
    /* 选择器权重为 0, 2, 1 */  
    p.text {  
        color: orange;  
    }  
  
    /* 选择器权重为 1, 0, 0 */  
    p:first-child {  
        color: purple;  
    }  
  
    /* 选择器权重为 0, 0, 1，但是 !important 使其具有最高优先级 */  
    #paragraph {  
        color: yellow !important;  
    }  
</style>

在这个示例中，<p>元素应用了多个样式规则，涉及到不同类型的选择器。具体来说，这些规则包括：

标签选择器 p，权重为 0, 1, 1，样式为 color: red;
ID选择器 #paragraph，权重为 0, 1, 2，样式为 color: blue;
类选择器 .text，权重为 0, 2, 0，样式为 color: green;
类选择器和标签选择器 p.text，权重为 0, 2, 1，样式为 color: orange;
伪类选择器 p:first-child，权重为 1, 0, 0，样式为 color: purple;
ID选择器 #paragraph，权重为 0, 0, 1，但是带有 !important 声明，样式为 color: yellow !important;

在这个例子中，最终应用到<p>元素的样式是 color: yellow !important;。这是因为带有 !important 声明的 ID选择器具有最高的优先级，即使它的选择器权重比其他选择器低。如果将 !important 声明从 ID选择器中移除，则应用到<p>元素的样式将是 color: orange;，因为它的选择器权重和优先级都比其他选择器高。

建议

我来给大家一些利用CSS选择器的权重和优先级的最佳实践和建议：

避免使用 !important：虽然!important声明可以使样式具有最高优先级，但滥用它可能会导致代码难以维护和理解。因此，应该尽量避免使用!important，而应采用合理的选择器和样式结构来管理CSS样式。
优化选择器的结构：尽可能使用具有较低权重的选择器来定义样式规则，例如标签选择器和类选择器。避免使用具有高权重的选择器，例如ID选择器和嵌套选择器，因为它们会增加样式计算的复杂度和渲染时间。
避免使用通用选择器：通用选择器（*） 会匹配所有元素，因此应该尽量避免使用它们。如果必须使用通用选择器，请将它们限制在特定的父元素或祖先元素中，以减少匹配的元素数量。
保持选择器简短：尽可能使用简短的选择器来定义样式规则。避免使用过于复杂的选择器，因为它们会增加样式计算的复杂度和渲染时间。
避免使用行内样式：虽然行内样式具有较高的优先级，但它会使代码难以维护和理解。因此，应该尽量避免使用行内样式，并将样式定义在外部样式表中。
使用类选择器代替ID选择器：虽然ID选择器具有较高的优先级，但它们不利于样式的复用和维护。因此，应该尽量使用类选择器来定义样式规则，以实现样式的复用和维护。

总之，利用CSS选择器的权重和优先最好遵循一些最佳实践和建议，以确保样式能够正确地应用到页面元素上，同时也便于代码的维护和理解。

总结

CSS选择器的权重和优先级对于样式的应用非常重要。当多个样式规则应用于同一个元素时，浏览器需要根据选择器的权重和优先级来决定哪个样式规则应该被应用。选择器的权重和优先级越高，样式规则的优先级就越高，被应用的可能性就越大。希望大家看完之后能对选择器的使用有一定的认识~

那么我们这篇文章到这里就结束啦~

如果你想了解更多这类文章，点赞关注作者更新更多后续~