css中样式的优先级顺序

CSS中样式的优先级顺序是相当重要的一个概念，大家一定要理解清楚。

在CSS中，样式的优先级顺序是由以下的规则所决定的：

Style rules (within a BLOCK)
ID selectors (e.g. #example)
Class selectors (e.g. .small, .large)
Attribute selectors (e.g. [type="radio"])
Pseudo-classes (e.g. :hover, :active)
Element selectors (e.g. h1, p, div)
Pseudo-elements (e.g. ::before, ::after)

所以，如果你有一个样式同时涉及到以上多个规则，那么就需要比较它们的优先级，按照优先级高低来确定最终的样式。

比如，下面这个例子中，样式的优先级顺序是这样的：

#example {
  color: red;
}

p {
  color: green;
}

.small {
  font-size: 12px;
}

p.small {
  font-size: 14px;
}

在这个例子中，如果我们应用这些样式到一个class为"small"的p标签上，那么优先级的顺序是这样的：

#example -> p.small -> .small -> p

所以，最终这个p标签的样式应该是这样的：

color: red;
font-size: 14px;

除此之外，还有一些特殊情况需要注意：

• !important标记会提高一个样式的优先级，不管其他规则如何。
• 行内样式（即在HTML标签内部直接写样式）优先级最高，因为它和其他样式表规则没有任何关系。

总之，只要遵循这些规则，就可以在CSS中正确地确定样式的优先级顺序。