前端的学习之路：初级CSS---选择器的权重

最新推荐文章于 2024-09-20 21:48:21 发布

new-SkyWaller

最新推荐文章于 2024-09-20 21:48:21 发布

阅读量122

点赞数

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

本文链接：https://blog.csdn.net/weixin_44647555/article/details/113556491

版权

初级CSS 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

选择器的权重


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/11.18.02.css"> -->
    <style>
        /*
        样式的冲突
            -当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突
            发生样式冲突时，引用哪个样式由选择器的权重（优先级）决定
        选择器的权重
                内联样式（行内样式） 1,0,0,0  1000
                id选择器            0,1,0,0  100  
                类和伪类选择器       0,0,1,0  10
                元素选择器           0,0,0,1  1
                通配选择器           0,0,0,0  0.1
                继承的样式           没有优先级
                
        比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器（并集选择器）是单独计算的，不累加）
            选择器 累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
            如果优先级计算后相同，此时则优先级使用靠下（在style中的位置靠下）的样式

            可以在某一个样式的沟边添加！important ，则此时该样式获取到最高的优先级，甚至超过内联样式
               注意：在开发中一定要慎用

        */
        #box1{
            color: hotpink;
           
            background-color: orange;
        }
        div #box1{
           
            background-color:blue;
        }
        .d1{
            background-color: purple !important;
        }
        
        div,span{
          
            background-color: yellowgreen;
        }
        .red{
            background-color: red;
        }
        *{ 
            font-size: 50px;
        }
        div{ 
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="box1"  class="red d1 d2 d3 d4">
        我是一个div 
        <span  >我是div中的span</span>
    </div>
<!-- span听通配选择器的，因为继承低于通配选择器的优先级 -->
</body>
</html>