CSS 多个选择器优先级，叠加选择器权重，important

最新推荐文章于 2024-09-20 02:44:07 发布

qq_16714671

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量1.5k

点赞数

分类专栏： CSS学习文章标签： css 前端 less

本文链接：https://blog.csdn.net/qq_16714671/article/details/122403423

版权

CSS学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、单选择器优先级

多个单选择器优先级：权重越大，其优先级越高，优先生效。!important表示权重最大，有!important修饰的永远优先生效。

!important>style>ID选择器>类选择器>元素选择>继承及*

选择器权重表如下：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS优先级</title>
    <style>
       
        .test {
            color: red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>

效果：

二、叠加选择器权重计算

a、复合选择器会有权重叠加的问题

b、权重虽然会叠加,但是永远不会有进位

/* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 2 */
ul li {
color: green;
}
/* li 的权重是 0,0,0,1 1 */
li {
color: red;
}
/* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 11 */
.nav li {
color: pink;
}