web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）

最新推荐文章于 2024-05-28 20:45:00 发布

香甜的甲基橙

最新推荐文章于 2024-05-28 20:45:00 发布

阅读量458

点赞数 1

分类专栏： css web前端基础学习笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_51249285/article/details/122506212

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

css

22 篇文章 5 订阅

订阅专栏

文章目录

1 CSS的三大特性

1 CSS的三大特性

CSS有三个非常重要的三个特性︰层叠性、继承性、优先级。

1.1 层叠性

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

层叠性原则:

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

eg : 01-层叠性.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>Document</title>
    <style>
        div {
            color: aliceblue;
            font-size: 12px;
        }
        div {
            color: aqua;
        }
    </style>
</head>
<body>
    <div>天官赐福，百无禁忌</div>
</body>
</html>

网页显示和检查

在这里插入图片描述

可以从红色框看出，有一个被划掉了，color冲突了，也就是被层叠掉了，覆盖，font-size没冲突的就不会被覆盖

1.2 继承性

现实中的继承：我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

eg : 02-继承性.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>Document</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>
    </div>
</body>
</html>

网页显示和检查

在这里插入图片描述

选中p标签处，然后可以找到下面显示，“继承自”div,有的吓死你hi英文Inherited from div

恰当地使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式( text-, font-,line-这些元素开头的可以继承，以及color属性)
继承性口诀:龙生龙，凤生凤，老鼠生的孩子会打洞
跟文字颜色相关可以继承，但高度，之后学的盒子模型里面的不能继承，记住哪些可以继承就可以了

行高的继承性

body {
	font-size:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是:当前子元素的文字大小*1.5
body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

eg : 03-行高的继承.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>Document</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的 1.5倍 所以当前行高是14*1.5=21px */
            font-size: 14px;
        }
        p {
            /* 1.5*16 = 24 当前行高 */
            font-size: 16px;
        }
        /* li 没有手动指定文字大小 则会继承父亲的 文字大小 body 12px 所以 li 的文字大小为12px 
        当前的 li 行高 就是 12*1.5=18px
        
        */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>

</html>

网页显示

在这里插入图片描述

1.3 优先级

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

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

选择器
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important	∞无穷大

优先级注意点：

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

eg : 04-优先级.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>Document</title>
    <style>
        /* 元素选择器 */
        div {
            color: pink;
        }
        /* 类选择器 */
        .text {
            color: red!important;
        }
        /* id选择器 */
        #demo {
            color: green;
        }


    </style>
</head>
<body>
    <div class="text" id="deml" style="color: purple;">你笑起来真好看</div>
</body>
</html>

网页显示

在这里插入图片描述

05-CSS权重注意点.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>Document</title>
    <style>
        /* 父亲的权重是100 */
        #father {
            color: red;
        }
        /* p 继承的权重为0 */
        /* 所以以后我们看标签到底执行那个样式，就先看这个标签有没有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a 链接浏览器默认制定了一个样式 蓝色的 有下划线 a {color: blue;} */
        
    </style>
</head>
<body>
    <div id="father">
        <p>你笑起来真好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>

可以理解：父亲权重不论多少继承下来后都是0，然后上面例子中又写了个p标签颜色，那么这个权重肯定比0大，所以网页显示p 是pink，此处a 链接，相同理解，是蓝色的，下划线

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

06-权重的叠加.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>Document</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重索然会叠加，但是永远不会有进位 */
        /* ul li 权重 0，0，0，1+0，0，0，1=0，0，0，2 */
        ul li {
            color: green;
        }
        /* li 的权重是0，0，0，1 */
        li {
            color: red;
        }
        /* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

上面例子中，权重最大的是.nav li 所以网页显示pink

香甜的甲基橙

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web前端学习128-134（CSS三大特性---层叠性，继承性，优先级）

文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级1 CSS的三大特性CSS有三个非常重要的三个特性︰层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠)**另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则:样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠eg : 01-层叠性.html<!DOCTYPE html><html lang="en">
复制链接

扫一扫