css order

什么是 CSS 层叠顺序？

CSS 层叠顺序（CSS Order）是一种确定 HTML 元素渲染顺序和优先级的算法。当多个 CSS 规则与同一个 HTML 元素匹配时，层叠顺序决定了哪个规则的属性值被应用到元素上。

通过理解 CSS 层叠顺序，我们可以更好地掌握样式优先级、覆盖和继承，以及解决样式冲突的问题。

层叠顺序的原则

层叠顺序的原则是根据多个因素来确定优先级，下面是一些影响层叠顺序的要素：

源：定义样式的方式影响层叠顺序。内联样式（在 HTML 元素的 style 属性中定义）的优先级比外部样式表（外部 CSS 文件或<style>标签中的样式）的优先级高。而采用 @import 引入的外部样式表的优先级低于直接使用<link>标签引入的样式表。
特殊性：特殊性决定了规则的优先级。CSS 规则可以根据选择器的特殊性进行排序，特殊性值越高的规则优先级越高。

元素选择器的特殊性为 0，类选择器的特殊性为 1，id 选择器的特殊性为 2。
内联样式（特殊性为 1000）的特殊性最高，会覆盖其他所有规则。

重要性：通过!important关键字设置的属性具有最高的优先级。
出现顺序：当其他因素相同时，后出现的规则将覆盖先出现的规则。

根据这些原则，浏览器对 CSS 规则进行排序，以确认最终的层叠顺序。

层叠顺序的数值

W3C 标准定义了一个层叠顺序的数值范围，用于表示元素在层叠上下文中的位置。这个数值范围从负无穷到正无穷，数值越高，元素在层叠上下文中越靠近顶部。

以下是数值范围从低到高的一些常用层叠顺序：

背景、边框、外边距和内边距：0
块级元素和文字文本：1
浮动元素和绝对定位元素：2
z-index 为负值的定位元素：-1
z-index 为正值的定位元素：大于2

这些数值仅用于整体了解层叠顺序的大致区别，并不代表实际的数值计算。

层叠上下文

层叠上下文（Stacking Context）是一种在 HTML 文档中创建层叠顺序的方法，通过层叠上下文可以修改元素在文档流中的层叠顺序。

创建层叠上下文的方法有多种，例如：

根元素（<html>）是一个层叠上下文的根。
position属性的值为除static以外的任何值，或者z-index属性值不为auto的元素。
CSS3 的 flexbox 布局和 grid 布局会创建一个层叠上下文。
元素的opacity小于 1。
…

层叠上下文中的元素与其他层叠顺序相互独立，并且在自己的层叠上下文中按照原则确定最终的层叠顺序。

清除默认样式

在开发中，我们经常需要清除默认的样式，以保证样式的一致性和控制性。

具体来说，我们可以通过以下方法清除默认样式：

使用 CSS Reset：通过为不同的 HTML 元素设置统一的默认样式，消除不同浏览器之间的差异。
使用 Normalize.css：一个现代的替代 CSS Reset，解决了大部分浏览器的 bug，并保持了现代浏览器的默认样式。
自定义样式：通过特定的选择器和规则，覆盖默认样式或者设置新的样式。

在实际开发中，根据项目需求选择适当的方法清除默认样式，并根据项目的整体风格进行定制化调整。

下面是一个使用 Normalize.css 清除默认样式的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Reset CSS Example</title>
  <link rel="stylesheet" href="normalize.css">
  <style>
    /* 自定义样式 */
    body {
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph.</p>
</body>
</html>