CSS三大特性——层叠性

小波

1年前发布

190

文章目录[隐藏]

样式冲突——就近原则
样式不冲突

层叠性指的是，在两个css样式冲突时候将会采用就近原则来处理，而没有冲突的元素照常执行。

样式冲突——就近原则

<head>
    <style>
        div{
            color: red;
        }
        div{
            color: #fff;
        }
    </style>
</head>

<body>
    <div>造梦空间论坛</div>
</body>

在这串代码中，上面写了二个css属性给这个div，那么按照就近原则，下面的那个color: #fff距离div更近，所以这个字体将会变成白色。

样式不冲突

<head>
    <style>
        div{
            color: red;
        }
        div{
            color: #fff;
        }
    </style>
</head>

<body>
    <div>造梦空间论坛</div>
</body>

在这个里面，虽然有一个css样式冲突了，但是还有一个样式没有冲突，那么冲突的那一个元素就会进行就近原则，所以显示字体颜色为白色，然后那个字体大小14px，则会保留，执行14px。

pink语录：长江后浪推前浪，前浪死在沙滩上