问: css 三大特性是什么?
答:css三大特性分别是 继承性 层叠性 优先级
1. 继承性
问题:继承性的特性是什么?有哪些常见的属性可以继承
答: 特性是子元素有默认继承父元素的某些样式
可以继承的有 文本属性 字体属性 行高 颜色属性
如 :
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
1.2 继承失效的特殊情况
-
a标签的color会继承失效
-
h系列标签的font-size会继承失效
-
div的高度不能继承,但是宽度有类似于继承的效果
1.3 继承的小应用
-
可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
-
直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
2. 层叠性
特性:相同选择器设置相同的样式就会出现样式层叠
问题1:如果给同一个标签设置了相同的属性,此时样式会出现什么情况?
答:会层叠覆盖,写在最后的会生效
问题2:如果给同一个标签设置了不同的样式,此时样式会出现什么情况?
答:会层叠叠加,共同作用在标签上
注意点:当样式不冲突时,要先考虑优先级,才能通过层叠性去进行判断
3. 优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式
问题1:优先级比较公式是怎样的?
答: 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
问题2:!important能提升继承的优先级吗?
答:不能
问题3:继承的优先级是最高还是最低?
答:只要是继承优先级最低
案例 :
<style>
body {
color: yellow !important;
}
* {
color: red;
}
div {
color: aqua;
}
.box {
color: blue;
}
#box {
color: orange;
}
</style>
<div id="box">盒子里面到底显示什么文字了?</div>