css打乱 |vs2013 css插件

今天大家来讨论一下CSS的一个小问题，那就是“打乱”。 在CSS中，“打乱”通常是指当大家在编写样式表时，某些样式设定并不能按照大家的意愿生效，而是被其它样式所覆盖、影响，从而出现显示错误的情况。下面大家来看一个例子：

<style>
p {
color: red;
font-size: 24px;
font-weight: bold;
}
.special {
color: blue;
font-style: italic;
}
</style>
<p>这是一段普通的文本。</p>
<p class="special">这是一段特别的文本。</p>

以上代码中，大家定义了两个样式，一个是针对`p`标签的普通样式，另一个是针对class为`special`的`p`标签的特殊样式。大家的初衷是想让普通`p`标签的文本为`red`色、加粗、字号为`24px`，而特殊`p`标签的文本为`blue`色、斜体字，但是下面的效果却与大家想象的不太一样：  可以看到，既然大家想要的东西和得到的结果不一致，那么必然是出现了“打乱”。具体来说，在大家的代码中，`.special`样式中设置的`color`属性被放在了前面，覆盖了原来`p`标签的`color`属性，从而导致了普通文本也变成了蓝色。 那么，怎样避免这种“打乱”呢？有两种常用的方法： – 优先级控制。可以在样式选择器前加上权重标识，例如`p.special`，这样就可以将`.special`的优先级提高，从而让它生效。 – 合并属性。如果两个样式设定了同一个属性，而前者又被后者覆盖，那么可以将两个样式的属性值合并在一个选择器内，例如`p { color: red; } p.special { color: blue; }`。 综上所述，避免CSS打乱是一个十分重要的问题，大家需要时刻注意控制好样式的优先级和属性的合并，才能编写出漂亮、稳定的样式表。