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

最新推荐文章于 2022-09-14 10:05:48 发布

yooo*

最新推荐文章于 2022-09-14 10:05:48 发布

阅读量159

点赞数 2

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/Y_ooo/article/details/121213554

版权

CSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS三大特性

层叠性、继承性、优先级

1.层叠性

相同选择器设置相同样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。

原则：

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

div {
    color: red;
    font-size: 20px;
}

div {
    color: pink;
}
/* 执行color: pink;和font-size: 20px; */

<div>长江后浪推前浪</div>

2.继承性

子标签会继承父标签的某些样式。

div {
    color: pink;
    font-size: 20px;
}

<div>
    <p>龙生龙，凤生凤</p>
</div>

只有部分样式可被继承（文本相关：text-,font-,line-开头元素，以及color属性）
恰当使用可简化代码，降低CSS样式复杂度

行高的继承

body {
    color: yellow;
    font: 12px/1.5 'Microsoft YaHei';
}

div {
    /* 子元素继承了父元素body的行高“1.5倍” */
    /* 因此div行高为 14*1.5=21px */
    font-size: 14px;
}

p {
    /* p行高为 20*1.5=30px */
    font-size: 20px;
}

/* li没有指定文字大小 但继承body 因此行高 12*1.5=18px */

<body>
    <div>赫奇帕奇</div>
    <p>赫奇帕奇</p>
    <ul>
        <li>赫奇帕奇</li>
    </ul>
</body>

行高可以跟单位也可以不跟
如果子元素没有设置行高，则继承父元素
子元素的行高：当前子元素文字大小*行高倍数
不跟单位的优势：子元素可以根据自己文字大小自动调整行高

3.优先级

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

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

#demo {
    color: blue;
}

.test {
    color: pink !important;
}

div {
    color: red;
}

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

选择器	选择器权重
继承	NULL
*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器，类属性值	0，0，1，0
id选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important(一般在引用第三方库后更改其样式时使用)	无穷大

通配符与继承的博弈：

通配符*>继承

<body>
    <article>
        <h2>yooo<span>alison</span></h2>
    </article>
</body>

* {
    color: red;
}

h2 {
    color: green;
}

在这里插入图片描述

优先级注意点：

权重是4组数字组成，等级从左向右判断，永远不会进位
可以简单记为无，0，1，10，100，1000，无穷
继承无权重，如果标签被选出来了，不管父元素权重多高，都执行选中标签的样式

#father {
    color: red;
}

p {
    color: pink;
}

body {
    color: purple;
}

/* a链接比较特殊，浏览器默认给他指定了一个样式：蓝色下划线 a {color: blue;} */

<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">链接</a>
</body>

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

例：

div ul li —>0,0,0,3
.nav ul li —>0,0,1,2
a:hover —>0,0,1,1
.nav a —>0,0,1,1
.nav[class] —>0,0,2,0

/* 复合选择器权重叠加问题 */
/* 权重虽然会累加，但永远不会进位 */
/* li的权重是0,0,0,1 */
li {
    color: red;
}

/* ul li的权重是0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
    color: pink;
}

/* .nav li的权重是0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: purple;
}

<ul class="nav">
    <li>赫奇帕奇</li>
    <li>拉文克劳</li>
    <li>格兰芬多</li>
</ul>

4.预处理器

生产环境中都会使用预处理器生成css文件（less sess）

yooo*

关注

2
点赞
踩
1

收藏

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

CSS三大特性层叠性、继承性、优先级1.层叠性相同选择器设置相同样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。原则：样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式样式不冲突，不会层叠div { color: red; font-size: 20px;}div { color: pink;}/* 执行color: pink;和font-size: 20px; */<div>长江后浪推前浪</div>2.继承性
复制链接

扫一扫