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

黄丫丫07

于 2022-11-11 15:03:14 发布

阅读量526

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_51495354/article/details/127806414

版权

层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css层叠性</title>

    <style>

        div {

            color: red;

            font-size: 12px;

        }



        div {

            color: pink;



        }

    </style>

</head>



<body>

    <div>长江后浪退前浪，前浪死在沙滩上</div>

</body>



</html>

继承性：子标签会继承父标签的某些样式，如文字颜色和字号，简单理解就是子承父业。

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css继承性</title>

    <style>

        div {

            color: aquamarine;

            font-size: 30px;

        }

    </style>

</head>



<body>

    <div>

        <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>

    </div>

</body>



</html>

恰当的使用继承可以演化代码，降低css样式的复杂性
子元素可以继承父元素的样式（text-,font-,line-这些元素开头的可以继承，以及color属性）

行高的继承性：font:12px/1.5 Microsoft Yahei;

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素的行高1.5

此时子元素的行高是：当前子元素的文字大小*1.5

Body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

优先级：当一个元素指定多个选择器，就会有优先级的产生

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important重要的	无穷大

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css优先级</title>

    <style>

        div {

            color: pink !important;

        }



        .test {

            color: red;

        }



        #no {

            color: aquamarine;

        }

    </style>

</head>



<body>

    <div class="test" id="no" style="color: purple;">你笑起来真好看</div>

</body>



</html>

优先级注意点：

权重是有4组数字组成，但是不会有进位
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css权重注意点</title>

    <style>

        #father {

            color: red !important;

        }



        /* 所以以后我们看标签到底执行哪个样式，就先看这个标签有没有被直接选出来 */

        p {

            color: pink;

        }



        /* a链接浏览器默认指定了一个样式 蓝色的有下划线的a{color：blue；} */

        a {

            color: aqua;

            text-decoration: none;

        }

    </style>

</head>



<body>

    <div id="father">

        <p>你还是很好看</p>

    </div>

    <a href="#">我是单独的样式</a>

</body>



</html>

优先级：

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

Div ul li ------>0,0,0,3

.nav ul li ----à0,0,1,2

A:haver---à0,0,1,1

.nav a-à0,0,1,1

Css权重练习：

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css权重练习

    </title>

    <style>

        .nav {

            color: red;

        }

        /* 继承的权重是0 */

        li {

            color: pink;

        }

    </style>

</head>



<body>

    <ul class="nav">

        <li>人生四大悲</li>

        <li>骄傲风口浪尖</li>

        <li>撒旦发广告</li>

        <li>按规范打个人</li>

        <li>aggregate</li>

    </ul>

</body>



</html>

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css权重练习</title>

    <style>

        .nav li {

            color: red;

        }



        /* 需求把第一个小li 颜色改为 粉色加粗 */

        .nav .pink {

            color: pink;

            font-weight: 700;

        }

    </style>

</head>



<body>

    <ul class="nav">

        <li class="pink">vzfdgfdag </li>

        <li>dfgdargre</li>

        <li>fhyjujyujey</li>

        <li>shtshdgh</li>

        <li>gfhytrws</li>

    </ul>

</body>



</html>