CSS三大特性继承性，层叠性，优先级

来源：互联网发布：网络猫和路由器的区别编辑：程序博客网时间：2024/05/16 08:32

一、继承性

1）什么是继承性？

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

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

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

3）继承性特殊性

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

4）继承性应用场景

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

5）案例

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>css继承性</title>    <style>        div{            color: red;            font-size: 16px;            text-decoration: underline;            background: deepskyblue;        }    </style></head><body><div>    <p>子元素</p>    <ul>        <li>            <p>后代元素</p>        </li>    </ul>    <a href="#">我是a标签</a>    <h1>我是h1</h1></div></body></html>

图一子元素继承父元素

这里写图片描述

图二后代元素继承父元素

这里写图片描述

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

这里写图片描述

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

这里写图片描述

二、层叠性

1）什么是层叠性？

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

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

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

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

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

三、优先级

1）什么是优先级？

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

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

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

3）CSS选择器优先级

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

4）案例

1、间接选中

/* style1*/<style>        ul{            color: red;        }</style>/*style2*/<style>        ul{            color: red;        }        li{            color: blue;        }</style><ul>    <li>        <p id="identity" class="para">我是段落</p>    </li></ul>

style1代码效果如图所示文字为红色

这里写图片描述

style2代码效果如图所示文字为蓝色

这里写图片描述

2、直接选中时是相同选择器

/* style1*/<style>         p{             color: red;         }         p{             color: blue;         }</style>/*style2*/<style>        p{             color: blue;         }        p{             color: red;         }</style><ul>    <li>        <p id="identity" class="para">我是段落</p>    </li></ul>

style1代码效果如图所示文字为蓝色

这里写图片描述

style2代码效果如图所示文字为红色

这里写图片描述

3、直接选中时不是同选择器

/* style1*/<style></style>/*style2*/<style>       li{           color: red;       }</style>/*style3*/<style>      *{           color: blue;       }       li{           color: red;       }</style>/*style4*/<style>      p{           color: green;       }      *{           color: blue;       }       li{           color: red;       }</style>/*style5*/<style>     .para{           color: pink;       }      p{           color: green;       }      *{           color: blue;       }       li{           color: red;       }</style>/*style6*/<style>     #identity{           color: purple;       }     .para{           color: pink;       }      p{           color: green;       }      *{           color: blue;       }       li{           color: red;       }</style><ul>    <li>        <p id="identity" class="para">我是段落</p>    </li></ul>