在 CSS 樣式表中,不同的選擇器會有不同的權重。如果多個選擇器同時應用于同一個元素,那么就需要確定優先級。其中最簡單的一種方式是通過選擇器的特殊性來比較優先級。
特殊性是 CSS 選擇器用于確定樣式規則優先級的一個指標。特殊性是一個由四個部分組成的集合,分別是:
樣式規則權重 HTML 元素標簽 類選擇器、偽類 屬性選擇器、偽元素 ID 選擇器 inline 樣式優先級 0 0 0 0 0 1
如果兩個樣式規則具有相等的特殊性,則遵守后面的規則。也就是說,如果兩個規則都應用到同一個元素,則使用最后面的規則。
如果希望某個選擇器的特殊性更高,可以增加其 ID 選擇器的數量或類選擇器的數量。比如:
#main p { /* 這個規則的特殊性高于 .content p */ font-size: 16px; } .content p { font-size: 14px; }
具體來說,由于 ID 選擇器的特殊性高于類選擇器,因此增加 ID 選擇器的數量可以使樣式規則優先級更高。
比如,如果樣式表中存在以下兩個規則:
ul li { color: red; } #sidebar ul li { color: blue; }
那么應用在側邊欄的列表項中的文本顏色將會是藍色,因為第二個規則的特殊性更高。
當然,樣式優先級不應該被濫用。如果所有規則都遵守良好的命名約定,那么不需要過多考慮樣式優先級問題。