一、继承性

1.文字的color、font-size、font-style、font-weight、font-family、text-alian、line-height、text-indent等这些属性都是可以继承的。

2. 特殊性

1》标题系列不会继承父元素的文字大小

2》a标签不会继承父元素的字体颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            color: red;
            font-size: 50px;
            font-weight: 700;
            font-family: "microsoft yahei";
            font-style: italic;
            text-align: left;
            line-height: 70px;
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>呵呵哒</p>
        <h2>呵呵哒</h2>
        <a href="#">超链接</a>
    </div>
</body>
</html>

css的三大特性总结;

二、层叠性

多个样式作用于同一个标签上之时,发生了样式冲突,当权重相同的时候,后来的样式会覆盖前边的样式,总是执行后边的样式,和元素样式的调用顺序无关。

三、优先级

默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 

     0              1                  10              100           1000         1000以上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            font-size: 20px!important;
            color: red!important;   

        }
        .box{
            font-size: 30px;
            color: blue;
        }
        #txt{
            font-size: 50px;
            color: orange;
        }

    </style>
</head>
<body>
    <div class="box" id="txt" style="font-size:100px; color:skyblue;">前端老霸气了</div>
</body>
</html>

注意:

继承的权重为0(当子元素没有样式的时候回继承父元素的样式,如果自己有样式会执行自己的样式);

权重会叠加。

相关文章:

  • 2021-11-19
  • 2021-10-07
猜你喜欢
  • 2021-12-22
  • 2022-12-23
  • 2021-07-29
  • 2022-12-23
  • 2022-01-19
相关资源
相似解决方案