css层叠在一起

CSS层叠是指在同一个元素上有多个属性被赋予不同的值时，如何确定这个元素最终显示的样式。这种情况下，CSS会对所有的属性进行一个计算，然后决定使用哪个属性值进行显示。

CSS层叠的规则有以下几点：

1. 权重高的样式会覆盖权重低的样式；
2. 相同权重的样式后面的会覆盖前面的；
3. !important标志的样式拥有最高的权重，会覆盖所有其他样式。

具体来说，权重高的样式指的是选择器具体度的大小。比如说，id选择器具体度大于class选择器，所以id选择器定义的样式会覆盖class选择器定义的样式。

在样式具体度相同的情况下，后面定义的样式会覆盖前面定义的样式。比如说：

p {
    color: red;
}

p {
    color: blue;
}

最终

元素的字体颜色会是蓝色，因为后面定义的样式覆盖了前面定义的样式。

但是，如果样式在定义时添加了!important标志，那么它将会覆盖所有其他样式。比如说：

p {
    color: red !important;
}

p {
    color: blue;
}

最终

元素的字体颜色仍然会是红色，因为红色样式添加了!important标志。

CSS层叠的规则可以帮助开发者更好地控制样式的编辑和显示。但是，过度使用!important标志可能会导致样式冲突和不可预测的结果。因此，开发者应该尽可能少使用!important标志，选择合适的选择器和样式定义。