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

最新推荐文章于 2024-06-16 12:12:51 发布

徐小七七

最新推荐文章于 2024-06-16 12:12:51 发布

阅读量2.6k

点赞数 5

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xustart7720/article/details/74347029

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一、继承性

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>

style1代码效果如图所示文字为浏览器默认的黑色

这里写图片描述

style2代码效果如图所示文字为继承li设置的红色

这里写图片描述

style3代码效果如图所示文字为通配符设置的蓝色

这里写图片描述

style4代码效果如图所示文字为p标签设置的绿色

这里写图片描述

style5代码效果如图所示文字为类设置的粉色

这里写图片描述

style6代码效果如图所示文字为id设置的紫色

这里写图片描述

徐小七七

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性继承性，层叠性，优先级

一、继承性1）什么是继承性？给父元素设置一些属性，子元素/后代也可以使用，这个我们称之为继承性。2 ) 并不是所有属性都可以继承的，那么有哪些属性具有继承性？只有以color/font-/text-/line开头属性才可以继承3）继承性特殊性a标签的文字颜色和下划线是不能继承的h标签的文字大小是不能继承的4）继承性应用场景一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体
复制链接

扫一扫

专栏目录