CSS层叠原理与优先级详解：实例演示与维护策略-优快云博客

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114543751

001_XXXX(h3)

CSS全称：层叠样式表(Cascading Style Sheets)
层叠是⼀一个基本特征
- 一个css属性被多次声明的时候，会根据优先级或者声明顺序来
  计算采⽤用哪个样式
优先级是怎么计算
- id > class > tag
- 标签选择器器 1
- 类选择器器 10
- id选择器器 100
- 通配符选择器器和表示关系的选择器器，对优先级没有影响
例外规则
- !important
- 注意的
- 不利利于代码的维护
- 建议不要在自己的局部代码(公用代码)里使用important
  可以在引入外部css，覆盖他本身的代码时，就可以用
源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>层叠</title>
  </head>
  <body>
    <h1>一篇文章</h1>
    <p class="first" id="first">
      <span>L <i>o</i>rem</span> ipsum dolor sit amet
    </p>
    <p id="second">
      Dolor, facilis. Dolorum maiores similique
    </p>
    <p>
      Molestias dolore obcaecati possimus voluptatum
    </p>
  </body>
</html>

<style>
  /* 通配符选择器 */
  * {
    padding: 0;
    margin: 0;
  }
  #first {
    color: blue;
  }
  .first {
    color: yellow;
  }
  /* span {
    color: #000 !important;
  } */
  /* .first span {
    color: red;
  } */
  p {
    color: green !important;
    text-align: right;
  }
</style>