css样式继承、覆盖

最新推荐文章于 2022-10-06 14:33:40 发布

敖佳慧

最新推荐文章于 2022-10-06 14:33:40 发布

阅读量361

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/m0_52650516/article/details/113507961

版权

首先我们梳理一下。哪属性会被继承。

文本

color,颜色a元素除外
direction，方向
-font 字体 font-Family. 字体系列
font-style 字体风格
font-size 字体大小
font-weight 字体粗细
letter-spancting 字母间距
line-height 行高
text -align 对齐方式
text-indent首行缩进量
text-transform 大小写修改
visibility可见性
white-space 指定任何处理表格
Word-spacing 字符间距

列表

list-style 列表样式
list-style-image 列表指定样式图片
list-style-position列表标记位置等等

css样式继承

页面布局的时候。往往采用的是分级布局。如果对每一块内容均单独进行样式编辑，修改会非常麻烦，而且调试困难。

样式继承不是一个默认行为，而是看那一个属性的默认行为，是否是inherit。浏览器默认样式 a标签的color浏览器默认样式不是inherit

.abstract{
       color:grey;
}
.abstract a{
color:inherit;
text-decoration:none;
border:thin black;
}
.different {
color:red;
}
.different a{
text-decoration:none;
border:thin black solid;
}

在这里插入图片描述

前面讲到外部文件引用css的优先级比style标签里的低但是id选择器的优先级比元素选择器的要高所以当元素选择器和id选择器都命中相同元素的时候id选择器的样式会覆盖元素选择器的样式

h1{
color：red;
}
#change{
color;blue;
}

样式的覆盖

规则：

根据引入方式来确定优先级
后写的覆盖先写的（同一级别）
加有"！important"的样式优先级最高，即使无论哪一种情况只要样式加了important那么该样式的优先级最高。

p{
color: white !important;
}

我们知道内联样式的优先级最高我们通过!important来进行覆盖

<body>
<h1 id="change" style="color:grey">
    helloword,你看到的是已经经历了三次变换的文字。
</h1>
</body>

h1{
color:red;
}
#change{
color: white !important
}

选择器优先级在选择器不同的情况下给每一种选择器指定一个权值，计算一个元素的所有选择器的总权值，值高者获胜

元素选择器：1
类选择器：10
id选择器：100
内联选择器：1000

敖佳慧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式继承、覆盖

首先我们梳理一下。哪属性会被继承。文本color,颜色a元素除外direction，方向-font 字体 font-Family. 字体系列font-style 字体风格font-size 字体大小font-weight 字体粗细letter-spancting 字母间距line-height 行高text -align 对齐方式text-indent首行缩进量text-transform 大小写修改visibility可见性white-space 指定任何处理表格W
复制链接

扫一扫