层叠性

        div {
            color: blue;
        }

        div {
            color: yellow;
        }

看这段代码,我们前面申明了div是蓝色了,后面有让他变成黄色了,那么我现在的div是什么颜色呢,答案很简答,根据就近原则,div要现在应该是是黄色。层叠性可以简单理解成覆盖。我们在chrome按下F12检查一下,第一个div是被划掉了。
F12

但是如果是这样的:

        div {
            color: blue;
            font-size: 56px;
        }

        div {
            color: yellow;
        }

只会覆盖掉冲突的颜色选项,但是字体大小不会覆盖。

F12
简单总结一下就是:

  •  样式冲突,按照就近原则覆盖
  •  样式不冲突不会覆盖

继承性

    <div>
        我是div
        <p>我是div的p</p>
    </div>
        div {
            color: blue;
        }

如上述代码,div元素的不仅仅是蓝色,p的文字也是蓝色。这是因为:css的继承性

子标签会继承父标签的默写样式,如文本颜色和字号

F12

注意:

这里没有继承所有的样式,而是继承了部分样式--->和字体相关的样式text-,font-,line- ,color

优先级

选择器优先级
继承或者 *0000
标签选择器(div之类的)0001
类选择器和伪类选择器0010
ID选择器0100
行内样式(style=“”)1000
!important最大

说明:

  • 使用本方法表示优先级,0000 不是二进制数(十进制),后面设计到权重的叠加
  • 数越大,优先级越大,优先级越大就会覆盖掉优先级小的样式
  • !importent 使用方法就是在样式后面加一个!importent

例如color:red!important;

复合标签优先级的叠加

        ul li {
            color: red;
        }

        li {
            color: blue;
        }
    <ul>
        <li>yxq1</li>
        <li>yxq2</li>
        <li>yxq3</li>
    </ul>

请问现在li标签的颜色?,很简答,是red

这是因为ul lili的优先级高,ul li的优先级为0001+0001两个标签选择器的叠加,但是li的权重为0001,显然现在是li是红色。

补充

这里的优先级,是样式冲突的时候,覆盖掉谁的问题的解决办法,在举一个例子吧

        /* .nav li 的优先级为 0010+ 0001 =0011 */
        .nav li {
            color: blue;
            text-decoration: underline;
        }

        /* .nav .yxq的优先级为 0010+0010=0020 */
        .nav .yxq {
            color: red;
        }
    <ul class="nav">
        <li class="yxq">越行勤1</li>
        <li>越行勤2</li>
        <li>越行勤3</li>
    </ul>

显示效果为:

image-20201213190956516

这里只有样式color冲突 ,根据优先级计算 .nav .yxq的优先级跟高,所以越行勤1为红色,但是text-decoration: underline;没有冲突,所以我们都有这个效果。

结语

没有
79A59EF56224B22753145CEA8E88BAA2-dfc4efa7ed3d4a6480b9233445c2e872

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2020/12/13/css三大特性层叠性继承性优先级
最后更新于:  229  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟