CSS 的全称是Cascading Style Sheets，即层叠样式表，“样式表”（style sheets）几个字易于理解，意思就是包含了各种样式的一个列表，而“层叠”（cascading）二字背后却有更多的东西等待挖掘。

层叠的几层含义

1. 样式层叠

可以多次对同一个选择器进行样式声明

  1. div {
  2.     background: red;
  3. }
  4. div {
  5.     border:1px solid green;
  6. }

2. 选择器层叠

可以用不同的选择器对同一个元素进行样式声明

  1. <div id="greenBorder" class="redBorder"></div>
  1. #greenBorder {
  2.     border: 1px solid green;
  3. }
  4. .redBorder {
  5.     border: 1px solid red;
  6. }

3. 样式表层叠

多个样式表可以层叠。

从样式表来源角度来说

  • 用户代理（浏览器默认）样式表
  • 用户样式表
  • 作者样式表

优先级:

  • 无 !important 时：作者样式 > 用户样式 > 浏览器默认样式
  • 有 !important 时：用户样式 > 作者样式 > 浏览器默认样式

一般会使用reset.css将浏览器默认样式reset掉，下面是一段经典的reset.css。 参考自：reset.css知多少 - Chokcoco

  1. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. table {
  6.     border-collapse: collapse;
  7.     border-spacing: 0;
  8. }
  9. fieldset, img {
  10.     border: 0;
  11. }
  12. address, caption, cite, code, dfn, em, strong, th, var {
  13.     font-style: normal;
  14.     font-weight: normal;
  15. }
  16. ol, ul {
  17.     list-style: none;
  18. }
  19. caption, th {
  20.     text-align: left;
  21. }
  22. h1, h2, h3, h4, h5, h6 {
  23.     font-size: 100%;
  24.     font-weight: normal;
  25. }
  26. q:before, q:after {
  27.     content: '';
  28. }
  29. abbr, acronym {
  30.     border: 0;
  31. }

从样式表位置来说

  • 内联样式

    1. <p style="color: red">红色字体</p>

  • 内部样式

    1. <head>
    2. <style type="text/css">
    3. p {color: red}
    4. </style>
    5. </head>

  • 外部样式表

    1. p {
    2. color: red
    3. }

4. 发生层叠时的特殊性等级

一张挺有意思的图

图片来源：CSS specificity

image.png

参考资料：你不知道的 CSS - 层叠样式表 - aniiantt

层叠特性使得CSS十分灵活但难以捉摸

当多个CSS样式表作用于同一元素时，可能会引发冲突。一些相关内容可以查看如何解决CSS样式冲突。