文章目录

  • ​​一、CSS 层叠性​​
  • ​​1、样式层叠冲突​​
  • ​​2、样式层叠不冲突​​






一、CSS 层叠性



1、样式层叠冲突



CSS 层叠性 :

为 标签 设置 多种 CSS 样式 , 会出现 CSS 样式叠加的情况 ,

如果有 两个相同类型 的 CSS 样式 作用在了 同一个 标签 上 , 那么就出现了 样式冲突 ,

样式冲突 后 , 根据 " 就近原则 " , 选择 最近设置 的样式 , 也就是 后设置的样式 覆盖 先设置的样式 ;



案例分析 :

下面的代码中 , 为 div 标签 同时设置了 两个 样式

下面 两个 div 标签选择器 都可以为 div 标签设置样式

并且两个样式都是设置文本颜色的

此处根据 " 就近原则 " , 选择后定义的样式 , 文本颜色为蓝色 ;

div {
      color: red;
    }

    div {
      color: blue;
    }



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>CSS 层叠性</title>
    <base target="_blank"/>
    <style>
        div {
            color: red;
        }

        div {
            color: blue;
        }
    </style>
</head>
<body>
<body>
    <div>
        CSS 层叠性
    </div>
</body>
</html>

展示效果 :

【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )_html



2、样式层叠不冲突



上面的示例中 ,color 样式出现了冲突 ,

第一个设置的 color 样式红色 , 被第二个设置的 color 样式蓝色覆盖 ,

如果第一个样式中设置了 字体大小 , 第二个样式没有 , 则 第一个样式中的 字体大小 设置 仍然生效 ;



代码示例 : 最终 div 盒子中的文本 , 使用了 第一个样式中的 ​​font-size: 30px;​​​ 和 第二个样式中的 ​​color: blue;​​ ;

<!DOCTYPE html> 
<html lang="en">
<head>    
    <meta charset="UTF-8" /> 
    <title>CSS 层叠性</title>
    <base target="_blank"/>
    <style>
        div {
            color: red;
            font-size: 30px;
        }

        div {
            color: blue;
        }
    </style>
</head>
<body>
<body>
    <div>
        CSS 层叠性
    </div>
</body>
</html>

【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )_前端_02