CSS优先级+继承_css继承优先级-优快云博客

本文链接：https://blog.youkuaiyun.com/lalala8866/article/details/138494272

1、优先级

优先级指的是相同样式字段重复时，具体是哪个样式值生效的判定。注意两个核心点

!important的优先级最高
作用域范围越小、优先级越高

外部样式文件 < 当前文件body < class < id < 行内style < important。

如果有多个class，则在行外<style>标签中声明靠后的优先级高；
如果就一个important那么他说了算。
如果这5个位置的important个数>1,那么此时是把有important的位置找出来，还是按照默认顺序来看。如下代码可以自行调试

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS优先级学习</title>
<style>
<style>
  body {
    background-color: black;
    color: green;
  }
  .blue-text{
    color:blue !important;
  }
  .pink-text{
    color:pink;
  }
  #orange-text{
    color:orange;
  }
</style>
</head>

<body>
<h1 class="blue-text pink-text"
    id="orange-text"
    style="color:red;"
>Hello World!</h1>
</body>
</html>

2、样式继承

官方文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance

在 css 中，当你没有为元素的样式属性指定值时(如果指定了那么自然以指定的为准，就不用考虑继承了)。
每个样式属性有明确的是默认继承的 (“Inherited: Yes”) 还是默认不继承的(“Inherited: no”)规定。

2.1 继承属性

如果该样式属性是继承的，那么就取父元素的同属性的计算值。因为文档根元素是有默认值的，所以该属性一定能够拿到值。比如 color 此时AA是绿色。

p { color: green; } 
<p>This paragraph has <em>AA</em> in it.</p>

2.2 非继承属性

如果该样式属性是非继承的，那么就取根元素默认值。比如 border 此时AA是无边框的。

p { border: medium solid; }
<p>This paragraph has <em>AA</em> in it.</p>

注意 inherit 关键字允许显式的声明继承性，它对继承和非继承属性都生效。
(注意：内容不全、但应该无错)

待补充学习

层叠与继承 https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance
CSS 优先级规则 https://www.runoob.com/note/13278
https://www.runoob.com/w3cnote/css-style-priority.html
https://juejin.cn/post/6844903997459922958
https://www.jianshu.com/p/ae5a8a61a126
https://www.jianshu.com/p/34044e3c9317