覆寫Inline CSS的覆寫功能作法

作者: Jas / 發表於 2009-07-09

Inline CSS

除了HTML Email(即edm或電子報)之外,一般而言,Inline CSS最常見的用法就是:在段落間用來覆寫(或推翻)既定CSS的定義。

尤其對已經運行了一段時間的網站來說,任何一個CSS Selector都可能套用在多個頁面,如果貿然去更動,結果可能就是牽一髮而動全身式的殘局收拾不完。

通常,在防範最慘烈下場的全盤考量下,designer會選擇使用inline css來給新頁面的某些網頁元件樣式以客製合用的定義。

譬如像以下這樣:

<div style="background: black;color: white">
這是一個黑底色反白字的DIV頁面區塊
</div>

這樣的作法,當作個案特例的解法,偶一為之應該還好。

不過,如果不知不覺地連用好幾次,或許也會有:某天想到要全盤改動時,必須逐頁逐頁去改的麻煩。

這時候,就需要用到一種覆寫Inline CSS覆寫功能的技法了。

實際作法就像這樣:

/* 覆寫掉所有使用Inline CSS的DIV頁面區塊 */
div[style] {
background: white !important;
color: black !important;
}




回上方