CSS特点详解

最新推荐文章于 2024-08-05 21:31:25 发布

kjl-37

最新推荐文章于 2024-08-05 21:31:25 发布

阅读量698

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_56275924/article/details/120954548

版权

1.层叠性 2.继承性 3.优先级 1.层叠性：层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来（包括那些允许设置多个值的属性也会合并，比如text-shadow）。】示例：依据层叠性的就近原则，第一个div的背景色为蓝色，第二个div的背景色为绿色。

<meta charset="UTF-8" />
<title>Document</title>
<style>
    div{
        background-color: red;
    }
    div{
        background-color: blue;
    }
</style></head><body>
<div>123</div>  <!-- 最终背景颜色是蓝色 -->
<div style="background-color: green;">123</div>  <!-- 最终背景颜色是绿色 --></body></html>

继承性是指当子标签没有设置样式时，会继承父标签的样式。比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。可继承的属性比如有字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）示例： Document div{ font-size:70px; background-color: #CCC; color:skyblue; }

p继承div的样式

3.优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】 o!important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。示例：下面的代码可以从上到下，依次注释选择器来测试优先级。

<meta charset="UTF-8" />
<title>Document</title>
<style>
    /* 从上到下，依次注释选择器来测试优先级 */
    div{
        color:green!important;
    }
    #id1{
        color:red;
    }
    .class{
        color: blue;
    }
    div{
        color:purple;
    }

</style></head><body>
<div>!import优先级</div>
<div style="color:red">行内样式优先级</div>
<div id="id1">id选择器优先级</div>
<div class="c1">类选择器优先级</div>
<div>标签选择器优先级</div></body></html>

kjl-37

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS特点详解

1.层叠性 2.继承性 3.优先级 1.层叠性：层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来.
复制链接

扫一扫