在CSS中,當多個CSS規則同時應用于同一個HTML元素時,必然會存在優先級的問題。而外聯CSS中的優先級順序是什么呢?
概述: 外聯CSS的優先級順序是從左到右,樣式較后的優先級更高,即具有“就近原則”。 具體規則: 1. 樣式屬性!important >id選擇器 >類選擇器、偽類選擇器、屬性選擇器 >標簽選擇器、偽元素選擇器 在多個CSS規則應用到同一個HTML元素時,如果有!important聲明,則該屬性的優先級最高; 如果沒有!important聲明,則先比較是否有id選擇器,有則優先級最高; 如果沒有id選擇器,則再比較類選擇器和屬性選擇器和偽類選擇器,有則優先級高于標簽選擇器和偽元素選擇器。 2. 優先級相同時,后面的CSS規則會覆蓋前面的規則。 注意: 1. 在CSS書寫時,應盡量避免使用!important,除非必須要用到; 2. 在使用標簽選擇器時,應盡量不要使用全局選擇器*,以免影響其他元素。 示例: HTML: <div id="box" class="box">Hello World!</div> CSS: .box { font-size: 16px; color: #333; } #box { color: blue; } div { font-size: 14px; } 結果:文字會顯示為藍色,大小為16px,因為id選擇器的優先級更高。如果將id選擇器改為類選擇器,則文字顏色會變回#333,因為類選擇器和屬性選擇器和偽類選擇器的優先級高于標簽選擇器和偽元素選擇器。
上一篇備注css
下一篇外聯式css不起作用