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

来源：互联网发布：淘宝网店名字女装编辑：程序博客网时间：2024/04/29 14:39

一，继承

<!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>

0 0