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選擇器。
下一篇mysql庫實例名