6.css三大特性 继承、层叠、优先级

一、继承性

1）什么是继承性？

• 给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。

2 ) 并不是所有属性都可以继承的，那么有哪些属性具有继承性？

• 只有以color/font-/text-/line开头属性才可以继承

3） 继承性特殊性

• a标签的文字颜色和下划线是不能继承的
• h标签的文字大小是不能继承的

4）继承性应用场景

• 一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体大小等内容

5）案例

    <style>
        div{
            color: red;
            font-size: 16px;
            text-decoration: underline;
            background: deepskyblue;
        }
    </style>



<div>
    <p>子元素</p>
    <ul>
        <li>
            <p>后代元素</p>
        </li>
    </ul>

    <a href="#">我是a标签</a>
    <h1>我是h1</h1>
</div>

图一子元素继承父元素

图二后代元素继承父元素

图三a标签的文字颜色和下划线是不能继承的

图四h标签的文字大小是不能继承的

二、层叠性

1）什么是层叠性？

• CSS处理冲突的一种能力，这个我们称之为层叠性。

2 ) 什么情况出现层叠性？

• 只有在多个选择器中“同一个标签”，又设置了“相同的属性”的时候，就会发生层叠性

3） 发生层叠性会怎么样？

• 当发生层叠性时，哪个选择器设置的属性起作用，是由优先级来确定

三、优先级

1）什么是优先级？

• 多个选择器可能会选择同一个元素，优先级高的先做，优先级低的后做，这个我们称之为优先级。

2 ) 优先级判断方式有哪些？

• 是否是直接选中（间接选中就是指继承，如果是间接选中时，就近原则）
• 直接选中时是相同选择器（则谁写在后面就听谁的）
• 直接选中时不是同选择器（则就会按照选择器的优先级来层叠）

3）CSS选择器优先级

id > 类 > 标签 > 通配符 > 继承 > 浏览器默认