CSS之层叠

╰半夏微凉° 2023-02-16 00:55 118阅读 0赞

文章目录

  • 层叠
      1. 比较重要性
      1. 比较特殊性
      1. 比较源次序
    • 应用

层叠

声明冲突：同一个样式，多次应用到同一个元素

层叠：解决声明冲突的过程，浏览器自动处理（权重计算）

1. 比较重要性

重要性从高到底：

作者样式表： 开发者书写的样式

1） 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式

2. 比较特殊性

看选择器

总体规则：选择器选中的范围越窄，越特殊

具体规则：通过选择器，计算出一个4位数(xxxx)

  1. 千位：如果是内联样式，记1， 否则记0
  2. 百位：等于选择器中所有id选择器的数量
  3. 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
  4. 个位：等于选择器中所有元素选择器、伪元素选择器的数量

3. 比较源次序

代码书写靠后的胜出

应用

  1. 重置样式表

书写一些作者样式，覆盖浏览器的默认样式

重置样式表 —> 浏览器的默认样式

常见的重置样式表：

normalize.css（链接地址：https://github.com/necolas/normalize.css/blob/master/normalize.css）

reset.css（链接地址：https://unpkg.com/reset-css@5.0.1/reset.css）

meyer.css

  1. 爱恨法则

link > visited > hover > active

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS-继承和层叠

    一: 继承 面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面

    悠悠悠悠/ 0 赞/ 494 阅读