CSS样式优先级

最新推荐文章于 2023-02-13 13:11:22 发布

哲子君

最新推荐文章于 2023-02-13 13:11:22 发布

阅读量209

点赞数 1

分类专栏： css选择器文章标签： css3

本文链接：https://blog.csdn.net/zhzijun/article/details/108513605

版权

css选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css样式优先级顺序

CSS选择器如下：
　　1. 标签名选择器 div { color：Red;} /即页面中的各个标签名的css样式
　　2.类选择器 .divClass {color:Red;} /即定义的每个标签的class 中的css样式
　　3.ID选择器 #myDiv {color:Red;} /即页面中的标签的id
　　4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} /即多个选择器以逗号的格式分隔命名找到准确的标签
　　5.群组选择器 div,span,img {color:Red} /即具有相同样式的标签分组显示
他们的优先级顺序如下：
！important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

根据CSS规范，具体性越明确的样式规则，权重值越高

id选择器权重=100
类选择器权重=10
标签选择器权重=1
选择器相加最后的权重越高，优先级越高
/例如：id选择器+标签选贼=100+1=101/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: green;
        }
        .ni{
            color: red;
        }
        div .ni{
            color: pink;
        }
        .ni .p1 .u .si a{
            color: black;
        }
        a{
            color: #ccc;
        }
    </style>
</head>
<body>
    <div class="ni">
        <div class="p1">
            <ul class="u">
                <li class="si"><a>world</a></li>
            </ul>
        </div>
    </div>
</body>
</html>