CSS特指度是指当多个CSS规则应用于同一元素时,浏览器如何决定哪些规则优先应用的方法。
CSS特指度由四个部分组成:内联样式、ID选择器、类/属性/伪类选择器和元素/伪元素选择器。内联样式具有最高的特指度,其次是ID选择器,再次是类/属性/伪类选择器,最后是元素/伪元素选择器。
/* 例子 1 */ p { color: red; } /* 特指度为 1, 0, 0, 0 */ #example { color: blue; } /* 特指度为 0, 1, 0, 0 */ /* 例子 2 */ p.article { color: green; } /* 特指度为 0, 0, 1, 0 */ p { color: red; } /* 特指度为 0, 0, 0, 1 */ /* 例子 3 */ a:hover { color: purple; } /* 特指度为 0, 0, 1, 1 */ p a:hover { color: orange; } /* 特指度为 0, 0, 2, 1 */
当样式规则应用于元素时,浏览器将计算样式规则的特指度。如果两个规则具有相同的特指度,则最后应用的规则将具有更高的特指度。如果两个规则具有不同的特指度,则具有更高特指度的规则被应用。
因此,理解CSS特指度对于写出可维护的CSS代码非常重要。为了避免样式冲突,应该尽量少使用即使优先级最低的元素/伪元素选择器,而是更善于使用更具特指度的类/属性/伪类选择器和ID选择器。