[分享]css先设的属性起作用

CSS中的属性有时会出现先设的属性起作用，即便后面有更具体的设置，也会被先设的属性覆盖掉。p { color: red; } text { color: blue; } 在上面的代码中，p标签的col...

CSS中的属性有时会出现先设的属性起作用，即便后面有更具体的设置，也会被先设的属性覆盖掉。

p {
  color: red;
}

#text {
  color: blue;
} 

在上面的代码中，p标签的color属性被设置为红色。而在id为text的元素中，color属性被设置为蓝色。但是实际在页面中出现的文本颜色却是红色。

这是因为CSS规定了不同的选择器有不同的优先级。在选择器优先级相同的情况下，后面出现的样式代码覆盖先出现的样式代码。

具体来说，在CSS中选择器的优先级是由其特定性(specificity)决定的。特定性是一个用于判断在多个选择器应用给相同元素的情况下哪个优先级最高的简单计算值。特定性值分为四个等级：行内样式、ID选择器、类选择器和标签选择器，按照从高到低的顺序排列。

所以在上面的例子中，p标签有一个标签选择器，而id选择器#text具有更高的特定性。但是因为p标签的color属性先被设定为红色，所以后面设置的属性无法覆盖它。

如果我们想让id为text的元素的文字颜色是蓝色的，我们可以在选择器中添加更多的样式规则，以提高特定性。

p {
  color: red;
}

#text p {
  color: blue;
} 

在这个例子中，我们给id为text的元素的子元素添加了一个标签选择器。这样我们可以确保蓝色的文本颜色会覆盖红色的文本颜色。

因此，了解CSS属性的优先级和特定性可以帮助我们更好地控制样式表，并避免产生不必要的冲突。