CSS 三大特性🦍🦍🦍

88 阅读2分钟

1.继承性

特性:子元素有默认继承父元素样式的特点(子承父业)
可以继承的常见属性:
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
注意点: • 可以通过调试工具判断样式是否可以继承

继承性.png
(拓展)继承的应用:
好处:可以在一定程度上减少代码
常见应用场景:
1. 可以直接给ul设置 list-style:none 属性,从而去除列表默认的小圆点样式
2. 直接给body标签设置统一的font-size,从而统一不同浏览器默认文字大小
(拓展)继承失效的特殊情况:
如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
1. a标签的color会继承失效
• 其实color属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
2. h系列标签的font-size会继承失效
• 其实font-size属性继承下来了,但是被浏览器默认设置的样式给覆盖掉了
3. div的高度不能继承,但是宽度有类似于继承的效果
• 宽度属性不能基继承,但是div有独占一行的特性

2. 层叠性

特性:
1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意点:
1. 当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

3. 优先级

特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式:
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important Ø 注意点: 1. !important写在属性值的后面,分号的前面! 2. !important不能提升继承的优先级,只要是继承优先级最低! 3. 实际开发中不建议使用 !important 。