css层叠性 优先级

在前端开发中，我们经常使用 CSS 来为网页添加样式。但是在 CSS 中经常会出现不同的样式规则互相冲突的情况，这时就需要了解 CSS 的层叠性和优先级。

CSS 的层叠性指的是当多个样式规则应用到同一个 HTML 元素上时，它们怎么样互相影响。CSS 的层叠性是根据选择器优先级来决定的。例如：

h1 { color: red; }
h1 { color: blue; }

在这个例子中，两个 h1 的样式规则都应用到了同一个元素上，但是它们的颜色是不同的。此时，颜色为什么会是 blue 而不是 red？这是因为后者覆盖了前者，也就是说，后者的样式优先级比前者高。

CSS 的优先级是根据选择器的权重来决定的，权重大的选择器具有更高的优先级。权重的计算方式如下：

选择器的类型（元素选择器、ID 选择器、类选择器等） -> 选择器中 ID 数量 -> 选择器中类/属性/伪类数量 -> 选择器中元素/伪元素数量

如果两个样式规则的优先级相同，那么就会根据它们在 CSS 文件中出现的顺序来决定哪一个生效。

需要注意的是，虽然样式优先级很重要，但是代码的可读性和维护性也很重要。我们应该尽量避免使用 !important，因为它会强制样式规则生效，使得后期调试和维护变得更加困难。

总之，深入了解 CSS 的层叠性和优先级可以帮助我们更好地掌握样式表的设计，使得我们的网站更加美观和易于维护。