CSS的层叠性

1.在同一个标签中，如果优先级相同，如果定义的样式发生冲突，那么最后一次定义的样式会将前面定义的样式(冲突的那部分)给覆盖掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            color: red;
            font-size: 20px;
        }
        div {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div class="one two">文字</div>


</body>
</html>

CSS的继承性

1.只有在嵌套关系的标签中才会出现继承性
2.如果子元素没有设置样式，那么该元素受父元素的影响
3.color，font属性，text-align…都可以被子元素所继承
注意：
✔width 和 height 不能被继承
✔a标签在默认情况下，不能受父元素的文字颜色影响(被默认样式层叠掉了)
✔标题标签在默认情况下，不能直接等于父元素设置的文字大小(被默认样式层叠掉了)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .one {
            color: red;
            font-size: 20px;
            font-weight: 700;
            font-family: "微软雅黑";
            font-style: normal;
        }
        h1 {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="one">
    <span>文字</span>
    <a href="#">超链接</a>
    <h1>标题</h1>
    <em>文字</em>
</div>
</body>
</html>

CSS的优先级

标签选择器<类选择器<id选择器<行内样式<!important
css为每一个基础选择器都分配了权重，可以将标签选择器比作1，类选择器比作10，id选择器比作100，行内样式比作1000，！importance为最大
✔继承的权重为0
即在嵌套关系结构中，不管父标签样式的权重到达，被子标签继承时都为0，也就是子标签的样式会覆盖继承来的样式。
✔权重可以叠加
多个基础选择器构成的复合选择器进行权重的叠加即可算出各自的权重
总结：
◆一般我们通过css设置样式的时候，不要把选择器的优先级设置的太高或者太低。
◆复合选择器的权重无论是多少个标签选择器叠加，其权重都不会高于类选择器
◆复合选择器的权重无论是多少个类选择器和标签选择器的叠加，其权重都不会高于id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #two {
            color: yellowgreen;
        }
        .one {
            color: yellow;
        }
        div {
            color: blue !important;
        }
    </style>
</head>
<body>
<div class="one" id="two" style="color:pink;">文字</div>
</body>
</html>