覆寫Inline CSS的覆寫功能作法

Thursday, July 09, 2009 Jas9

除了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;  

  }

Trackback 本文引用網址：

GoldenMango 回應於 7/09/2009 11:30:00 PM

IE6無效
Hapi 回應於 7/11/2009 07:00:00 PM

hello... hapi blogging... have a nice day! just visiting here....
花蓮民宿回應於 7/12/2009 03:37:00 PM

需要用到一種覆寫Inline CSS覆寫功能的技法