. 小 . 提 . 示 . - CSS 的優先順序

BLOG TAG LOCAL NOTICE GUEST

'override' 搜索網誌文章共有 1篇

2008/10/29 CSS 的優先順序

CSS 的優先順序

Category : HTML & CSS
Reg Date : 2008/10/29 19:00

網頁編輯的時候, 現在常常會大量使用到 CSS Style 的方式。一般我們常見的方式有三種:

1. 在 header 將 css 檔 include 進來
2. 在 header 加入 style, 像下面這樣
3. 直接在 html tag 中加入 style

如果我們都只選用了一個方法, 那問題就很簡單了。但如果我們同時用了上述三種方法, 並且都針對同一個屬性設定時, 到底 css 會如何判斷使用那一個呢。
答案是 3 -> 2 -> 1。簡單的說, 就是愈晚被讀取, 優先性就愈高。

下面舉一個簡單的例子, 大家可以自己試著去改改看就知道結果了。
首先, 建一個 my.css 檔

p {color:#ff0000;}

再建一個 my.htm 檔

<html>
<head>
<title>Title</title>
<link href="my.css" rel="stylesheet"
    type="text/css" />
<style type="text/css">
  p {color:#00ff00;}
</style>
</head>
<body>
<p style="color:#0000ff;">文字</p>
</body>
</html>

所以上面的例子結果是文字。

另一個棘手的問題來了。有時我們用 include 的方式或是在 head 中加入 style 中的部分屬性是不希望因網頁中其他的設定而改變。有時候更要進到每一頁去找可能衝突的設定。這時可以利用 ! important 來讓優先權變高。

使用的方法就是直接加在屬性的後面。例如我們現在把 my.css 改一下變成這樣: