1.继承性: 子承父业 - 子元素有默认父元素样式的效果图
1.1 常见可以继承样式:1.color 2.font-相关属性 3. line-height:行高
可以继承的常见属性(文字控制属性都可以继承) :1. color 2. font-style、font-weight、font-size、font-family 3. text-indent、text-align 4. line-height 5. ……
➢ 注意点: • 可以通过调试工具判断样式是否可以继承
1.2 继承的小样式: 1)去除列表默认的样式(小圆点): ul {list-style:none}
继承常见应用:1.可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
<style>
/* li {
list-style: none;
} */
ul {
list-style: none;
}
</style>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
1.4 继承失效的特殊情况
1. a标签的color会继承失效 • 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了 2. h系列标签的font-size会继承失效 • 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
(调试会发现h标签font-size:1.17em 就是当前文字的1.17个大小,所以会随当前文字大小变化)
3.div的宽度有继承的效果
2.层叠性
特性:
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点: 1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果
<style>
/* 层叠性:给同一个元素设置相同样式,后面的代码会层叠掉之前的代码 */
div {
color: red;
}
div {
color: blue;
}
/* 给同一个元素设置不同样式,不同样式层叠作用在该元素 */
div {
color: red;
}
div {
font-size: 50px;
}
</style>
<body>
<div>文字</div>
</body>
3.优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
3.1 优先级公式:继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
注意:!important不要用在继承,如果用在继承并不能提高优先级
3.2 权重叠加计算:(0,0,0,0)
1.行内样式的个数
1.id选择器的个数
1.类选择器的个数
1.标签选择器的个数
代码时例:
<style>
/* 0 , 0 , 1 , 1 */
.father p {
color: red;
}
/* 0 , 0 , 0 , 2 */
div p {
color: blue;
}
/* 0 , 0 , 1 , 1 */
div .son {
color: green;
}
/* 0, 1 ,1 ,0 */
.father #two {
color: orange;
}
/* 0 ,0 ,0 ,1 */
div {
/* !important不能提升继承的优先级(权重) */
color: pink !important;
}
</style>
<html>
<body>
<div class="father" id="one">
<p class="son" id="two">文字</p>
</div>
</body>
</html>