CSS三大特性

发布于 2023-06-26  134 次阅读


1. CSS三大特性

1.1. 继承性

子元素默认继承父元素样式

  • 常见的可继承属性

    • 1. color
    • 2. font-style, font-weight, font-size, font-family
    • 3. text-indent、text-align
  • 继承的使用场景

    • 1. 可以直接给ul设置list-style\:none属性,从而去除列表默认的小圆点样式
    • 2. 直接给body标签设置统一的font-size,从而同意不同浏览器默认文字的大小
  • 继承失败的特殊情况

    • 0. 如果元素有浏览器默认样式,此时继承性依然存在,但是优先显示浏览器的默认样式
    • 1. a标签的color属性继承失效(被浏览器默认设置的样式覆盖)
    • 2. h标签的font-size会继承失效(被浏览器默认设置的样式覆盖)
    • 3. div的高度不能继承,宽度有类似的继承效果(宽度不能继承,是因为div有独占一行的特性)

1.2 层叠性

  • 特性

    • 1. 给同一个标签设置不同的样式,此时会层层叠加,并最终作用在标签上
    • 2. 给同一个
  • 注意点

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

1.3 优先级

  • 特性

    • 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级第的选择器样式
  • 优先级公式

    • 继承< 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

关于复合条件下,权重叠加计算:

从权重更高的开始逐层比较,如果权重高的更多就使用权重更高的复合条件

如人饮水,冷暖自知。
最后更新于 2023-08-20