淘先锋技术网

首页 1 2 3 4 5 6 7

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选择器。