• 技术文章 >web前端 >前端问答

    css3哪个属性改变层叠性

    青灯夜游青灯夜游2022-01-13 14:50:45原创68

    在css3中,可以利用“!important”规则来改变层叠性,该规则用于增加指定样式的权重,进而改变样式的层叠性,语法为“选择器 {属性: 值 !important;}”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    什么是层叠性?

    层叠性就是浏览器处理冲突的一个特性,如果一个属性通过多个选择器设置到同一个元素上面,那么这个时候就会只有一个选择器起作用,而其他的选择器都将被层叠掉。

    定义:相同选择器设置相同的样式,此时其中一个样式会覆盖另一个冲突的样式。

    作用:解决样式冲突的问题。

    层叠性原则:当发生样式冲突时,遵循就近原则。

    CSS层叠性的体现:

    1:样式无冲突

    /* 多个选择器选择同一个元素,样式并无冲突时 */
    .box_one{
        width:100px;
        height:100px;  
    }
    .box_two{
        background:red;
    }
    <body>
         <div class="box_one box_two"></div>
    </body>

    以上代码中,样式代码并无冲突,两个选择器中的所有样式都叠加到了元素div上,div最终呈现的是一个红色的,宽高度大小为100px的容器。

    1.png

    2:样式有冲突

    样式有冲突,同一级别不受优先级影响时

    .box_one{
       width:100px;
       height:100px;
     }
    .box_two{
        width:200px;
        background:red;
    }
    <body>
        <div class="box_one box_two"></div>
    </body>

    以上代码中,在同级别时(同个元素,同是class定义选择器名称),样式代码出现冲突,两个选择器中出现同一条width属性,则以CSS代码中最后出现的那条样式为准,div最终呈现的是一个width为200px,height为100px,红色的容器。

    2.png

    样式有冲突,不同级别受优先级(权重)的影响时

    CSS规定基本选择器的优先级从低到高排序为:元素(标记)样式 < 类别(class)样式 < ID样式 < 行内样式 < !important。

    那么css3哪个属性改变层叠性

    在css3中,可以利用“!important”规则来改变层叠性。

    CSS 中的 !important 规则用于增加样式的权重。

    !important 与优先级无关,但它与最终的结果直接相关,使用一个 !important 规则时,此声明将覆盖任何其他声明。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    #myid {
      background-color: blue;
    }
    
    .myclass {
      background-color: gray;
    }
    
    p {
      background-color: red ;
    }
    </style>
    </head>
    <body>
    
    <p>段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>
    
    <p class="myclass">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>
    
    <p id="myid">段落中的一些文本内容!!!都会显示红色,因为 !important 作用,你可以删除该规则来看看效果。</p>
    
    </body>
    </html>

    3.png

    修改一下p选择器样式的权重:

    p {
      background-color: red !important;
    }

    4.png

    以上实例中,尽管 ID 选择器和类选择器具有更高的优先级,但三个段落背景颜色都显示为红色,因为 !important 规则会覆盖 background-color 属性。

    (学习视频分享:css视频教程

    以上就是css3哪个属性改变层叠性的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 层叠性
    上一篇:css3转换有哪些属性 下一篇:css3的边距属性包括哪两种

    相关文章推荐

    • 什么是css3伪元素• CSS3设置动画的相关属性有哪些• css3中常用的背景属性有哪几个• css3动画怎么设置执行一次• css3伪类和伪元素是什么意思• css3控制元素隐藏的方式有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网