css的三大特性（继承，层叠，优先级）

最新推荐文章于 2024-08-21 15:03:08 发布

小鱼的池塘

最新推荐文章于 2024-08-21 15:03:08 发布

阅读量5.2k

点赞数 1

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/54972876

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-css三大特性之继承性.html</title>
    <style>
        div{
            color: red;
            font-size:30px;
            /*background: green;*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<!--
    继承性(inheeited),子类可以使用父类的属性
    注意点:
    (1),不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承
    (2),在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
    (3),css继承性中的特殊性
    a标签的文字颜色和下划线是不能被继承的
    h标签的文字大小是不能被继承的
    应用场景:
    一般用于设置网页上的一些共性信息
    body{}
-->
<div>
    <p>我是段落</p>
</div>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>
<div>
    <a href="#">我是超链接</a>
</div>
<div>
    <h1>我是标题</h1>
</div>
</body>
</html>

二，层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-css三大特性之层叠性.html</title>
    <style>
        p{
            color: red;
        }
        .para{
            color: aqua;
        }
    </style>
</head>
<body>
<!--
    层叠性,css处理冲突的能力
    注意点:
    层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性",才会发生层叠性

    CSS:Cascading Style Sheets 层叠样式表
-->
<p id="identity" class="para">我是段落</p>
</body>
</html>

三，优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>26-css三大特性之优先级.html</title>
    <style>
        #id1{
            color: blue;
        }
        .para{
            color: red;
        }
    </style>
</head>
<body>
<!--
    优先级,当多个选择器选中同一个标签时,并且给同一个标签设置相同的属性时,如何层叠就由优先级来决定
    判断条件:
    1,是否是直接选中,就是直接第一次选中的就是要设置的标签,例如
        p{}
        #identity{}
        .para
    2,间接选中,就是继承,谁离目标标签近就会继承谁的属性,例如
        ul{}
        li{}
    3,相同的选择器,如果都是直接选中,并且都是同类型的选择器,谁在后边就听谁的,例如
        p{ }
        p{}
    4,不同选择器,如果都是直接选中,并且不是同类型的选择器,那么就会按照选择器的优先级来层叠,例如
        id>类>标签>通配符>继承>浏览器
-->
</body>

<ul>
    <li>
        <p id="id1" class="para">我是段落</p>
    </li>
</ul>
</html>

四，提升优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>27-css优先级之importent.html</title>
    <style>
        #id1{
            color: blue;
        }
        .para{
            color: red !important;
        }
        *{
            color: aqua;
        }
    </style>
</head>
<body>
<!--
    !important,用于提升某个直接选中标签的选择器的某个属性的优先级,可以将被指定的属性的优先级提升为最高
    注意点:
    1,!important,只能用于直接选中,不能用于简介选中
    2,通配符*选中的也是直接选中
    3,!important只能提升指定属性的优先级,其他的不会提升
    4,!important必须写在;前面,并且!不能丢掉
-->
<ul>
    <li>
        <p id="id1" class="para">我是段落</p>
    </li>
</ul>
</body>
</html>

五，权重计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>28-css优先级之权重.html</title>
    <style>
        #identity1 .box2{
            color: red;
        }
        .box1 .box2{
            color: aqua;
        }
        div ul li p{
            color: green;
        }
    </style>
</head>
<body>
<!--
    优先级的权重,当多个选择器在一起使用时,我们可以计算权重来判断优先级
    计算:
    根据id,class,标签的个数判断大小(还是依据最基本的优先级)
    如果选择器都一样,个数也是一样多,那么谁在后边就听谁的
    就像是扑克牌比大小
-->
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
</body>
</html>