CSS的嵌入優先級是指當同一個元素被多個CSS規則同時選擇時,瀏覽器如何決定使用哪一個規則來渲染這個元素。
嵌入(inline)的CSS樣式有最高的優先級,它們直接應用于特定的HTML元素。例如,下面這個例子中的HTML元素a標簽使用了內聯CSS:
<a style="color: red;">我是紅色的</a>
在這種情況下,無論其他CSS規則包含什么樣的選擇器和聲明,a標簽始終會顯示為紅色。
接下來,我們考慮外部(external)和內部(internal)CSS的優先級。當同一個元素出現在多個CSS文件中,瀏覽器會首先查找內聯樣式,其次是外部樣式表和內部樣式表。
<style> p { color: red; } </style> <p style="color: green;">我是綠色的</p>
在這個例子中,p標簽出現在內部樣式表和內聯CSS中,但是最終顯示的顏色是綠色,因為內聯樣式的優先級高于內部樣式表。
最后,如果有多個CSS規則都匹對了同一個元素,并且它們都是外部樣式表或內部樣式表中定義的,那么優先級會基于選擇器的特異度(specificity)和樣式表中聲明的順序。特異度越高的規則優先級越高,同一特異度的規則按照它們在樣式表中出現的順序應用。
例如:
<style> p { color: blue; font-size: 16px; } .example p { color: green; font-size: 20px; } </style> <p class="example">我是綠色的,大小為20px</p>
在這個例子中,.example p選擇器優先級高于p選擇器,因為它的特異度更高。因此,p標簽的顏色和字體大小由.example p選擇器聲明的樣式決定,也就是說,它將顯示為綠色,字體大小為20px。
總的來說,當使用CSS時,嵌入的樣式有更高的優先級,但是在外部樣式表和內部樣式表中聲明的樣式基于特異度和聲明順序確定優先級。了解CSS的優先級是編寫高質量樣式的關鍵之一。