选择器的权重

最新推荐文章于 2021-04-19 20:28:50 发布

守住⒈份信仰°

最新推荐文章于 2021-04-19 20:28:50 发布

阅读量426

点赞数

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

本文链接：https://blog.csdn.net/qq_43648337/article/details/108420683

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为该元素的同一个样式设置不同的值时，此时就发生了样式的冲突。
发生冲突时，为发生冲突的样式设置哪个值由选择器的权重（优先级）决定。
样式的优先级：（由高到低）

样式	权值
内联样式	1，0，0，0
id选择器	0，1，0，0
类和伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配选择器	0，0，0，0
继承的样式	没有优先级

注：1、比较优先级时，需将所有的选择器权值相加计算（相加是按位相加，不会进位），总的权值越高，优先级越高。但分组选择器是单独计算，不相加。
2、选择器的累加不会超过其最大数量级，比如：11个类选择器累加不会超过id选择器的值。其只在第二位累加，无法加到第三位。
3、如果优先级计算后相同，则使用后面设置的样式。
4、可以在样式的最后边加上！important，此时该样式会获得最高优先级，甚至超过内联样式。（实际开发中慎用）

<!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被设置为绿色  */
        div{
            color: red;
        }
        .red{
            color: green;
        }
        
        /* 此时加了元素选择器后加了！important，其成为最高优先级 */
        #box{
            background-color: yellowgreen;
        }
        div{
            background-color: blue !important;
        }

        /* 选择器权值累加,此时选择器的权值为0,1,0,1 */
        div#box{
            font-size: 50px;
        } 
    </style>
</head>
<body>
    <div id="box" class="red">
        我是一个div
    </div>
</body>
</html>

守住⒈份信仰°

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
选择器的权重

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为该元素的同一个样式设置不同的值时，此时就发生了样式的冲突。发生冲突时，为发生冲突的样式设置哪个值由选择器的权重（优先级）决定。样式的优先级：（由高到低）样式权值内联样式1，0，0，0id选择器0，1，0，0类和伪类选择器0，0，1，0元素选择器0，0，0，1通配选择器0，0，0，0继承的样式没有优先级注：1、比较优先级时，需将所有的选择器权值相加计算（相加是按位相加..
复制链接

扫一扫

专栏目录