CSS优先级的一些理解

但缓且不息

于 2022-03-20 21:57:55 发布

阅读量323

点赞数 2

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_49930465/article/details/123621443

版权

前端专栏收录该内容

12 篇文章 3 订阅

订阅专栏

CSS有三个非常重要的特性：层叠性、继承性、优先级

对优先级的一些理解：

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器权重如下表所示：

选择器	选择器权重
继承或者*（通配符）	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important重要的	∞无穷大

优先级注意点：

权重是有4组数字组成，但是不会有进位！（例如一个并集选择器中，由十个标签选择器组成，不及一个类选择器的权重大）。
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
等级判断从左向右，如果某一位数值相同，则判断下一位数值。
注意，可以简单记忆成，通配符和继承的权重为0，标签（元素）选择器的权重为1，类（伪类）选择权重为10，id选择器权重为100，行内样式表权重为1000，!important权重无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

权重叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

举几个例子：

div ul li ----------> 0,0,0,3
.nav ul li ----------> 0,0,1,2
a:hover ----------> 0,0,1,1
.nav a ----------> 0,0,1,1

具体练习一下：

<!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">
    <title>Document</title>
    <style>
        /* 继承的权重为0 */
        .nav {
            color: red;
        }
        /* 元素选择器权重为1  因此会显示绿色 */
        li {
            color:green;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>
</html>

效果为：

<!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">
    <title>Document</title>
    <style>
        /* .nav li 权重为11 */
        .nav li{
            color: red;
        }
        /* 需求把第一个小li  颜色改为绿色 加粗 */
        /* .green权重为10 不可行  .nav .green  权重为20 因此会显示绿色加粗 */
        .nav .green {
            color:green;
            font-weight:700;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li class="green">11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>
</html>

效果为：