CSS层叠与继承原理详解,-优快云博客

本文链接：https://blog.youkuaiyun.com/zjbzcs/article/details/132088697

层叠

两条同一级别的样式规则作用于同一个元素，将使用写在后面的规则
```
h1{
color:red;
}
h1{
color:blue;//该条规则将被使用
}
```

继承

父元素的部分属性可以被子元素默认继承，可以继承的属性一般可由常识判断（比如margin，padding，border等不会被继承，color，font-size可以被继承）
```
<body>
 <h1>标题</h1>//h1将继承body的颜色red
</body>
<style>
body{
color:red;
}
</style>
```

控制继承

5个内置属性值

inherit：开启继承
initial：设置为该属性的初始值
revert：设置为浏览器该属性的默认值
unset：将属性设为自然值，如果选中元素是自然继承那么就是inherit，否则就是设置为initial
revert-layer（不常用）：设为上一个层叠层的属性

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>层叠与继承</title>
    <link href="./style/mdn_css_cascade.css" rel="stylesheet" />
<style>
@layer base,special;
@layer base {
  body {
    color: green;
  }
  a {
    color: yellow;
  }
  .my_class1 a {
    /* 这里继承了body的green */
    color: inherit;
  }
  .my_class2 a {
    /* 初始化为属性的初始值 */
    color: initial;
  }
  .my_class3 a {
    /* 重置为自然值 这里由于my_class3下面的a标签都继承了body的color 所以自然值为inherit 否则为initial */
    color: unset;
  }
  .my_class4 a {
    /* 重置为浏览器默认值 */
    color: revert;
  }
  .my_class6 {
    color: red;
  }

  blockquote {
    background-color: orange;
    border: 2px solid blue;
  }

  .fix-this {
    /* 这里会继承body的color属性，其他属性全部为initial */
    /* all: unset; */
    /* 这里会继承body的color属性和其他默认属性 */
    /* all: inherit; */
    /* 这里会取消所有属性 */
    /* all: initial; */
    /* 这里会将blockquote标签选择器的所有样式重置为浏览器默认,其实就是取消掉了标签选择器的所有样式*/
    all: revert;
  }
}
/* 特殊层 */
@layer specail {
  /* 特殊层的my_class5类下所有a标签颜色用棕色 */
  .my_class5 a {
    color: brown;
  }
  /* 但是特殊层的主体颜色还是用上一层级的红色 */
  .my_class6 {
    color: revert-layer;
  }
}
</style>
  </head>
  <body>
    <ul>
      <li>Default<a href="#"> link </a>color</li>
      <li class="my_class1">Inherit the <a href="#">link </a>color</li>
      <li class="my_class2">Initial the <a href="#">link </a>color</li>
      <li class="my_class3">Unset the <a href="#">link </a>color</li>
      <li class="my_class4">Revert the <a href="#">link </a>color</li>
      <li class="my_class5 my_class6">Revert layer the <a href="#">link </a>color</li>
    </ul>

    <blockquote>
        <p>This blockquote is styled</p>
    </blockquote>

    <blockquote class="fix-this">
        <p>This blockquote is not styled</p>
    </blockquote>
  </body>
</html>

层叠优先级

层叠优先级由3个元素决定：
1. 资源顺序
  
  优先级相同的规则后面的会覆盖前面的
2. 优先级
  
  优先级算法：ID（选择器中包含一个id选择器+100）、类（选择器中包含一个类、伪类、属性选择器+10）、元素（选择器包含一个元素、伪元素选择器+1）；例如#a .b a 选择器的计算结果为111，值越大优先级越高
  
  PS：内联样式优先于上述所有选择器样式
3. 重要程度
  
  !important可以覆盖上述优先级规则（PS：一般都不要用它）；覆盖一个!important的方法是另一个的优先级更高或者优先级相同时资源顺序更靠前
覆盖声明的顺序

用户代理中（浏览器默认）的!important声明>用户（浏览器用户可以自定义样式表）样式表中!important声明>作者（网页开发人员）样式表中!important声明>作者样式表常规声明>用户样式表常规声明>用户代理样式（浏览器默认）表常规声明
级联层顺序

对于常规样式声明，层的声明靠后的覆盖前面的，!important样式声明与之相反，样式表中不属于任何一层的声明会形成一个默认层放在层的声明的最后。

参考：层叠与继承 - 学习 Web 开发 | MDN (mozilla.org)

CSS继承 优先级 笔记

CSS继承优先级笔记