css权重复习

2019-01-01  本文已影响0人  chengfengwang

等级

!important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

比较规则

首先双方需要应用到同一个元素才谈得上比较

<style>
    h1 {
        background-color: red  //生效
    }
    #wrapper {
        background-color: blueviolet
    }
</style>
</head>
<body>
    <div id="wrapper" class="wrapper">
        <h1 class="h1" id="content" title="i am h1">我是h1</h1>
    </div>
</body>

权重是在双方处于同一等级的情况下,才开始对比

无论多少个class组成的选择器,都没有一个ID选择器权重高。类似的,无论多少个元素组成的选择器,都没有一个class选择器权重高、无论多少个ID组成的选择器,都没有行内样式权重高。

所以权重是在双方处于同一等级的情况下,才开始对比。

如果两个权重不同的选择器作用在同一元素上,权重值高的css规则生效

如果两个权重不同的选择器非作用在同一元素上,距离近规则生效

上一篇 下一篇

猜你喜欢

热点阅读