CSS样式优先权

    不少时候一个元素的样式并不是直接对元素定义,而是对其祖先元素定义,而后经过继承性获得样式。例如,在body中定义的文字的颜色(color)属性,在p元素中也是有效的。这就是样式的继承。字体

    若是一个元素在多个地方定义了某个样式属性,最后哪一个起做用呢?
继承

    例如:在body中定义了字体的大小,元素p的属性style中定义了文字颜色,内部样式表和外部样式表中也都定义了元素p的文字颜色,并且某段文字还用属性id和类名都定义了文字颜色。这样会致使复杂的样式层叠关系,到底谁能够起做用呢?
import

    若是一个元素被具备相同属性名的多个样式重复做用,也就是出现了样式层叠,CSS须要经过这些样式的选择器的特殊性来进行选择其中的一个样式。选择器越特殊优先权越高,选择器优先权最高的样式被选中。若是最高优先权的有多个,则要看这些样式中哪一个样式离这个元素最近,离得最近的被选中。
im

    选择器的特殊性能够根据下面的规则来肯定:
样式

(1)对于id选择器,每一个特殊性加0100;
伪元素

(2)对于类选择器,属性选择器,伪类选择器,每一个特殊性加0010;
img

(3)对于标签选择器和伪元素选择器,每一个特殊性加0001;ant

(4)每一个元素只能定义一个行内样式,行内样式的特殊性为1000;标签

(5)对于结合符和通用选择器,它对特殊性没有贡献,其特殊性为0000;
co

(6)对于继承得来的选择器没有任何特殊性,其特殊性为0000;

(7)加上!important的样式具备最高的优先权。


优先权比较:

    0100 > 0020;

    0021 > 0020;


特殊性计算例子

相关文章
相关标签/搜索