继承性
- 特性:子元素有默认继承父元素样式的特点
- 可以继承的常见属性
1.color
2.font-size、font-weight、font-style、font-family
3.text-indent、text-align
4.line-height
5. ......
- 注意点:
可以通过调试工具判断样式是否可以继承
控制文字的属性都能继承,不是可以控制文字的属性都不能继承。
1.控制文字的属性都能继承(color):
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
这是div标签里面的文字
<span>这是div里面的span</span>
</div>
</body>
浏览器显示效果如下:
检查Chrome浏览器源代码:可以看出来,span标签继承了父标签div的属性
2.不是控制文字的属性都不能继承:
<style>
div {
color: red;
font-size: 30px;
height: 300px;
}
</style>
</head>
<body>
<div>
这是div标签里面的文字
<span>这是div里面的span</span>
</div>
</body>
检查Chrome浏览器源代码:
div宽高变化:
span宽高显示:
由此可见,span并未继承父标签宽高属性,因为这不是控制文字的属性
拓展:继承性失效的情况
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
1.a标签的color会继承失效
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是超链接</a>
<h1>一级标题</h1>
</div>
</body>
因为超链接标签在浏览器中默认的颜色是蓝色,所以这里,a标签继承性失效,无法继承父标签的color属性,浏览器显示情况如:依然显示的是默认颜色,蓝色
如果想让a标签的字体变成红色,需要单独设置,无法利用继承性:
<style>
div {
color: red;
}
a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">这是超链接</a>
<h1>一级标题</h1>
</div>
</body>
浏览器显示情况如图:
a标签文字颜色改变。
2.h系列标签的font-size会继承失效
<style>
div {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<div>
<a href="#">这是超链接</a>
<h1>一级标题</h1>
</div>
</body>
h系列标签在浏览器中有其默认的字体大小,所以h1标签继承性失效,无法继承父标签div的font-size属性,字体大小没有发生变化。
h标签字体大小没有变化
层叠性
- 特性:
1.给同一个标签设置相同的样式——此时样式会层叠覆盖——最终写在最后的样式会生效
<style>
div {
color: red;
color: green;
}
</style>
</head>
<body>
<div>
文字
</div>
后面的color会叠加在前面的color上,显示绿色:
2.给同一个标签设置不同的样式——此时样式会层叠叠加——会共同作用在标签上
<style>
div {
color: red;
color: green;
}
.box {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
</body>
最终浏览器显示如下:color和font-size同时显示出来了
- 注意点:
当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。
优先级
- 特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
- 优先级公式:
继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式< !important
- 注意点:
1. !important写在属性值的后面,分好的前面
2. !important不能提升继承的优先级,只要是继承优先级最低
3. 实际开发中不建议使用!important