CSS选择器之声明的优先级

最新推荐文章于 2023-12-10 20:42:11 发布

Blockchain Explorer

最新推荐文章于 2023-12-10 20:42:11 发布

阅读量358

点赞数

分类专栏： CSS/CSS3 文章标签： CSS 声明的优先级层叠继承权重

本文链接：https://blog.csdn.net/TDCQZD/article/details/82355875

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、选择器的特殊性

1、选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：

1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性

2、特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
3、选择器的特殊性最终都会授予给其对应的声明
4、如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

**注意：**id选择器和属性选择器
div[id=”test”]（0,0,1,1）和 #test（0,1,0,0）

代码说明：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*0,0,0,1*/
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
            /*0,1,0,0*/
            #app{
                background: pink;
            }
            /*0,0,16,0*/
            .test.test.test.test.test.test.test.test.test.test.test.test.test.test.test.test{
                background: deeppink;
            }
            /*0,1,1,0*/
            #app.test{
                background: yellow;
            }
            /*0,0,1,1*/
            div:nth-child(1){
                background: lightslategrey;
            }

        </style>
    </head>
    <body>
        <div id="app" class="test" style="background: black;"></div>
    </body>

二、重要声明

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明。
并允许在这些声明的结束分号之前插入 !important 来标志。

必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面

标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决。如果一个重要声明与非重要声明冲突，胜出的总是重要声明。

代码说明：

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 200px;
                height: 200px;
            }


            div.test{
                    background: red!important;
            }
            div{
                background: yellow!important;
            }

            #test.test{
                background: pink;
            }
            #test{
                background: deeppink;
            }

        </style>
    </head>
    <body>
        <div id="test" class="test">

        </div>
    </body>

三、继承

    继承没有特殊性，甚至连0特殊性都没有
    0特殊性要比无特殊性来的强

代码说明：

<head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*0,0,0,1*/
            div{
                width: 100px;
                height: 100px;
            }
            *{
                color: red;
            }

        </style>
    </head>
    <body>
        <div id="app" style="color: black;">
            <div>
                123
            </div>
        </div>
    </body>

四、来源

css样式的来源大致有三种

创作人员
读者
用户代理

代码说明：

<head>
        <meta charset="UTF-8">
        <title></title>
        <!--如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势-->
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                color: #000000;
            }


            #test{
                width: 200px;
                height: 200px;
                color: deeppink;
            }
            #inner{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="test" class="test">
                test
                <div id="inner">
                    inner
                </div>
        </div>
    </body>

五、权重：

    读者的重要声明
    创作人员的重要声明
    创作人员的正常声明
    读者的正常声明
    用户代理的声明

六、层叠

1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级

先按来源排序
在按选择器的特殊性排序
最终按顺序

Blockchain Explorer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器之声明的优先级

一、选择器的特殊性1、选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0 一个选择器的具体特殊性如下确定：1.对于选择器中给定的ID属性值，加 0,1,0,02.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0 3.对于选择器中的给定的各个元素和伪元素，加0,0,0,14.通配符选择器的特殊性为0,0...
复制链接

扫一扫