優先等級的行內CSS能駕御嗎？

睡蓮 標籤
CSS

　　下面代碼中，包含了引入CSS檔樣式表(藍字)、在<head></head>裡的嵌入式 CSS(綠字)、和行內CSS(橘字)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:⁄⁄www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:⁄⁄www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>各式CSS</title>
<link rel="stylesheet" type="text/css" media="all" href="external-style.css" />
<style type="text/css">
/*<![CDATA[*/
p{color:red;}
/*]]>*/
</style>
</head>
<body>

<p style="color:orange">顏色</p>

</body>
</html>

　　在此三種中，分別各為 p 標籤文字定義不同顏色，假設在引入的樣式表中定義為 p { color:blue } 、 內嵌式定義為 p { color:red }，行內定義為 style="color:orange"，按優先使用等級順序為： 1)行內(橘) => 2)嵌入(紅) => 3)引入(藍)，最終顯示結果會以橘色字來呈現。

　　從維護角度看，較高優先級的行內樣式，反而不及較低優先級的引入樣式表來得較便利。

　　既然行內樣式是較高優先級，嵌入式和引入式是否就註定只能做阿二和阿三？不能超越它、駕御行內CSS？如果真的這樣想，那麼現在便要改變思維方式了。

　　為了便於測試，下面的實例演示以嵌入式跟行內式對陣。

　　先觀看只有行內定義的結果：

　　現在就出動優先級較次的嵌入式，能否在不動行內式一根汗毛下駕御它，使它乖乖的跑往左邊呢？

　　從上面的代碼中，相信閣下可以看的到嵌入式用了什麼武器了。