【HTML、CSS教學】16. className堆疊
Published in
1 min readMay 23, 2020
🚩 前言
在維護別人的專案時,很多時候無法堅持用自己的準則來面對別人的程式碼,即便重構是一種選擇,但因為很多 BUG 是有急迫性的,前端不會在乎程式碼寫的多漂亮,只在乎現在話面怎麼有問題。
在這情況下,使用 className 堆疊 來調整 CSS 樣式就是一種選擇。
🚩 CodePen 範例
範例中有兩行原先是 .green 的顏色,因為需求而被改成了粉紅色,
利用權重堆疊的方式,超過原本 .green 的10分。
.demo ul li ul li.green {
background-color: salmon;
}
因為新需求而要改回綠色時,
若是在不改變 HTML 標籤、使用 !important 以及更動其他 CSS 的情況下,
可以將 .green 的 className 做堆疊,超過上面的分數 24 分。
.green.green.green {
background-color: lightgreen;
}
要注意的是 .green 與 .green 中間是沒有空白的,否則會變成階層的關係。
💡 tip: 分數計算可參考另一篇教學 【HTML、CSS教學】5. CSS權重