首先我们梳理一下。哪属性会被继承。
文本
- 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