选择器的权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <style>
        #box1{
            color: orange;
        }
        div{
            color: yellowgreen;
        }
        .red{
            color: red;
        }
        /*
            样式的冲突
                - 当我们通过不同的选择器, 选中相同的元素, 并且为相同的样式设置不同的值, 此时就发生了样式的冲突

            发生样式冲突时, 应用那个样式由选择器的权重(优先级)来决定的

            选择器权重
                内联样式    1,0,0,0
                id选择器    0,1,0,0
                类和伪类选择器  0,0,1,0
                元素选择器  0,0,0,1
                通配选择器  0,0,0,0
                继承的样式  没有优先级
            
            比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级高,则越优先显示(分组选择器时单独计算的)
                选择器的累加不会超过其最大的数量级, 类选择器在高也不会超过id选择器
                如果优先级计算后相同,此时优先使用靠下的样式

            !important
                可以在某一个样式的后边添加 !important ,则此时该样式会获取到最高的优先级, 甚至超过内联样式
                注意: 在开发中这个玩意一定要慎用
         */
    </style>
</head>
<body>
    <div id="box1" class="red" style="color: skyblue;">我是一个div</div>
</body>
</html>
posted @ 2021-03-03 16:13 博客帅帅阅读(86) 评论(0) 收藏举报
刷新页面返回顶部
博客帅帅

选择器的权重

公告
