html中权重的计算

最新推荐文章于 2022-03-27 23:49:59 发布

qq_45411328

最新推荐文章于 2022-03-27 23:49:59 发布

阅读量1k

点赞数

分类专栏： html中权重的计算 html 文章标签： html

本文链接：https://blog.csdn.net/qq_45411328/article/details/107135239

版权

html 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

html中权重的计算

1 篇文章 0 订阅

订阅专栏

html中权重的计算规则

在HTML中对一个元素的相同属性可能在不同的地方会赋不同的值那么这个元素最终的表现形式会如何呢规则如下：
一.比较重要性
重要性从高到低
1.作者样式表中的！important样式（带有！important的样式优先级非常高打破默认的优先规则）
2.作者样式表中的普通样式
3.浏览器默认样式表的样式
二.比较特殊性选择器的优先级
总结出来的规则：选择器选中的范围越窄，越特殊。
具体规范：通过选择器计算出一个4位数（x x x x）这里四位数不是逢十进一
千位：如果是内联样式，记为1，否则为0；
百位：等于选择器中所有id选择器的数量（为#id标记的选择器）
十位：等于选择器中所有的类选择器（.class标记的选择器）.属性选择器.伪类选择器
个位：等于选择器中所有选择器.伪类选择器的数量

     <style>
            a{
                /* 0001 */
                color: red;
            }          
            div ul a{ 
                /* 0003 */
                color: orange;
            }
            #mydiv #mylist  .mylink{
                /* 0210 */
                color: chartreuse;
            }
            #mydiv #mylist  a:link{
                /* 0211 */
                color: black;
            }
    </style>
</head>
<body>
    <div id="mydiv">
        <ul id="mylist">
            <li class="l" id="myLi">
                <a href="#" class="mylink">
                    权重的计算
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

比较上面的代码可以看出首先以上四个都没有内联样式所以千位为0
a{}：就有一个元素选择器所以0001
div ul a{}：三个元素选择器0003
#mydiv #mylist .mylink{}：两个id选择器一个类选择器0210
#mydiv #mylist a:link{}：两个id选择器一个伪类选择器一个伪元素选择器0221
所以最终字体的颜色为black
在这里插入图片描述

三.比较顺序
相同权重就近原则（代码书写在后面的优先）

qq_45411328

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html中权重的计算

html中权重的计算规则在HTML中对一个元素的相同属性可能在不同的地方会赋不同的值那么这个元素最终的表现形式会如何呢规则如下一.比较重要性重要性从高到低1.作者样式表中的！important样式（带有！important的样式优先级非常高打破默认的优先规则）2.作者样式表中的普通样式3.浏览器默认样式表的样式二.比较特殊性选择器的优先级总结出来的规则：选择器选中的范围越窄，越特殊。具体规范：通过选择器计算出一个4位数（x x x x）这里四位数不是逢十进一千位：如果是内联样式，纪委1
复制链接

扫一扫