CSS class 重寫是指在同一個 HTML 元素上應用多個 CSS class,并通過優(yōu)先級規(guī)則選擇應用哪個樣式。
在 HTML 中,我們可以為元素指定一個或多個 class:
<div class="red bold">Hello World</div>
在上面的例子中,div 元素同時應用了 red 和 bold 兩個 class。
在 CSS 中,當一個元素應用了多個 class,我們可以通過優(yōu)先級規(guī)則來確定應用哪個樣式。
具體來說,優(yōu)先級可以分為以下幾個級別(按優(yōu)先級從高到低):
- !important
- 行內樣式(style="")
- ID 選擇器
- 類選擇器、屬性選擇器、偽類選擇器
- 標簽選擇器、偽元素選擇器
- 通配符選擇器
上面的優(yōu)先級規(guī)則是按照從高到低的順序排列的。也就是說,!important 的優(yōu)先級最高,而通配符選擇器的優(yōu)先級最低。
在同一個優(yōu)先級規(guī)則下,后定義的樣式會覆蓋先定義的樣式。例如,下面的代碼中,color:red 的樣式會被 color:blue 的樣式覆蓋:
.my-class { color: red; } .my-class { color: blue; }
最后,當一個元素應用了多個 class,我們可以通過優(yōu)先級規(guī)則來選擇應用哪個樣式。例如,下面的代碼中,bold 的樣式優(yōu)先級高于 red 的樣式,所以文字會是粗體黑色的:
.red { color: red; } .bold { font-weight: bold; color: black; } <div class="red bold">Hello World</div>