CSS选择器优先级：计算方法与权重规则

翻滚的胖子
2023-05-30 01:37:30
前端技术
CSS JavaScript

在Web开发中，CSS选择器优先级是一个非常重要的概念。当多个选择器作用于同一个元素时，浏览器需要根据优先级来决定采用哪一个选择器。如果你曾经深陷过CSS选择器优先级的困扰，那么本文将帮助你彻底理解这个问题。

一、计算方法

CSS选择器优先级的计算方法是一个非常基础的概念，其公式如下：

优先级 = （ID选择器出现的次数 * 100） + （类选择器、属性选择器和伪类选择器出现的总次数 * 10） + 元素选择器和伪元素选择器出现的次数

这个公式的意思是，如果一个选择器中包含了ID选择器，那么它的优先级就比没有ID选择器的选择器要高。同样的道理，如果一个选择器中包含了类选择器、属性选择器或伪类选择器，它的优先级也会相应地提高。

下面是一些具体的例子：

/* 优先级为0,0,1 */
span {
    color: red;
}

/* 优先级为0,1,0 */
.foo {
    color: green;
}

/* 优先级为1,0,0 */
#bar {
    color: blue;
}

/* 优先级为0,1,1 */
.foo span {
    color: yellow;
}

/* 优先级为1,1,0 */
#bar.foo {
    color: orange;
}

/* 优先级为1,0,1 */
#bar span {
    color: purple;
}

/* 优先级为1,1,1 */
#bar.foo span {
    color: brown;
}

二、权重规则

除了计算方法，CSS选择器优先级还遵循一些权重规则。这些规则以一定的优先级顺序排列，具体如下：

在选择器中使用了!important声明的样式
行内样式（在HTML标签中直接使用style属性）
ID选择器
类选择器、属性选择器和伪类选择器
元素选择器和伪元素选择器

这些规则的意思是，如果一个样式使用了!important声明，那么它的优先级就最高。同样的道理，如果一个样式是通过行内样式定义的，它的优先级也会很高。而如果一个样式是通过ID选择器定义的，那么它的优先级就比通过类选择器、属性选择器或伪类选择器定义的样式要高。

下面是一些具体的例子：

/* 优先级为0,0,1 */
span {
    color: red !important;
}

/* 优先级为1,0,0 */
#bar {
    color: blue;
}

/* 优先级为0,1,0 */
.foo {
    color: green;
}

/* 优先级为0,1,1 */
.foo span {
    color: yellow;
}

/* 优先级为1,1,0 */
#bar.foo {
    color: orange;
}

/* 优先级为1,0,1 */
#bar span {
    color: purple;
}

/* 优先级为1,1,1 */
#bar.foo span {
    color: brown;
}

三、代码案例

下面是一个简单的代码案例，它演示了如何使用CSS选择器优先级控制样式：

<!DOCTYPE html>
<html>
<head>
    <title>CSS选择器优先级：计算方法与权重规则</title>
    <style>
        /* 优先级为0,0,1 */
        span {
            color: red;
        }

        /* 优先级为0,1,0 */
        .foo {
            color: green;
        }

        /* 优先级为1,0,0 */
        #bar {
            color: blue;
        }

        /* 优先级为0,1,1 */
        .foo span {
            color: yellow;
        }

        /* 优先级为1,1,0 */
        #bar.foo {
            color: orange;
        }

        /* 优先级为1,0,1 */
        #bar span {
            color: purple;
        }

        /* 优先级为1,1,1 */
        #bar.foo span {
            color: brown;
        }
    </style>
</head>
<body>
    <div id="bar" class="foo">
        <span>Hello, world!</span>
    </div>
</body>
</html>

上面这个案例中，我们使用了ID选择器、类选择器和元素选择器，来定义了一些不同优先级的样式。在HTML中，我们使用了一个带有ID和类的DIV元素，以及一个带有元素选择器的SPAN元素。最终的效果是，SPAN元素的文本颜色为褐色。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com