快速參考:


常見的 CSS(v1) selector 設定套用的次序如下:

<style type="text/css">
  div       { color: black ; ... }  /*       1st level */
  .nClass   { color: green ; ... }  /* +this 2nd level */
  #nId      { color: blue  ; ... }  /* +this 3rd level */
  ...
</style>
  ...
<div style="color: red; ... "><!--  /* +this 4th level */ -->


CSS 規範上說: stylesheet 的來源有 user agent, author 及 user 等三種. user agent 就是我們用的 browser 指的是 browser 的預設值; author 是作者的意思, 指的是網頁的作者在網頁上所使用的 stylesheet; 而 user 就是我們, 指的是我們在 browser 中的個人用的 stylesheet 設定. 而套用的次序是:

  1. user agent
  2. user normal
  3. author normal
  4. author important
  5. user important

一來由於調整 stylesheet 的設定不容易, 二來由於各網站的網頁對於各種 HTML tag 的運用都不相同, 造成 user stylesheet 其實發揮不了什麼作用, 搞不好一設就破壞了原網頁的排版, 造成閱讀上的困難, 是故絕大多數人的 user stylesheet 都是空的. 因此上述的五項也就只剩下 1, 3, 4 三項了. 其中 auther important 指的是 author stylesheet 中設定值的後面附有 !important 的設定, 所以真正需要討論就是只有 author 部份.


網頁作者 (author) 可以運用的元素樣式 (style) 來源有以下幾種:

  1. 外部 stylesheet (external/included stylesheet): 使用 <link> tag 從外部引入, 可以引入多份. 例如:
    <link tyle="text/css" rel="stylesheet" href="site.css" />
    <link tyle="text/css" rel="stylesheet" href="docs.css" />
    
  2. 內崁 stylesheet (internal/embedded stylesheet): 使用 <style></style> 內建在 HTML 網頁檔案中, 可以在 <hea></head> 中, 也可以在 <body></body> 中, 可以出現多次. 例如:
    <style type="text/css">
     div { padding:  5px; }
     p   { margin: 0 8px; }
     ...
    </style>
    
  3. 置入式 style (inline style): 使用 style="..." 附加在任一個需要的 tag 中, 例如:
    <p style="margin: 4px;">
    
  4. 舊式 style: 使用舊式 HTML 語法, 例如:
    <table border="1" cellspacing="1" cellpadding="1">
    

這許多種來源, 除了第3項 (優先權最高) 及第4項 (優先權最低) 的作用範圍是被指定的特定元素之外, 第1及第2項都是在每一組設定 ({} 括住的部份) 前加一個作用範圍宣告 (selector), (參看 CSS 語法)

各種 selector 的優先權如下:

  • 影響最終結果的是主要是作用範圍. 原則是作用範圍大的先設定, 再來是範圍小的, 最後才是個別元素的. 作用範圍由大到小, 如下表:
    v1 v2/3 Selector 名稱 說明 範例
    Universal 萬用, 所有的 tag *
    4 d Element 某一類型的 tag h1
    * d Pseudo-Element 虛擬元素 ::first-letter
    3 c Class 有設定分類的 tag (class="example") .example
    c Attribute 有設定屬性的 tag (attr="value") [type="radio"]
    * c Pseudo-class 虛擬分類 :hover
    2 b ID 有設定 ID 的 tag (id="example") #example
    1 a Inline style 附在單個 tag 中的 style="..." style="font-weight:bold"
  • Style 屬性重覆: style 屬性重覆時, 顯示的結果會是最後套用的 (作用範圍小的; 也就是後套用的優先權高). 例如:
    <style>
    p { color: red; }
    .override { color: blue; }
    </style>
    ...
    <p>This is paragraph 1.</p>
    <p class="override">This is paragraph 2.</p>
    
    第4行的文字是紅的. 但是因為 class selector 優先權高, 第5行的文字最終的結果是藍色的.
  • Selector 重覆: selector 重覆時, 依這些 style 在 stylesheet 的出現次序載入次序套用設定. 例如:
    <style>
    h1, div, p { margin: 0; color: blue; }
    ...
    p { margin: 0 1em; }
    </style>
    ...
    <p>This is a test sample.</p>
    
    最後文字是藍色的, 但是 margin 的設定是: 0 1em (先套用前面的規則設定了 margincolor, 再套用後面的規則設定 margin)
  • tag 的 style 屬性有些會遺傳給被他括住的子 tag, 有些則不會. 繼承來的 style 屬性, 優先權是最低的.
    • 會遺傳的, 如: 字型相關的 color, font-family, font-size, font-weight, ...
    • 不會遺傳的, 如: 邊框相關的 border, padding, margin, ...
    • 預設不會遺傳的 style 屬性可以在設定值使用 inhert 來進行繼承.
  • CSS2 及 CSS3 有更進一步的 selector 語法, 優先權的計算上會變得有點複雜 (雖然基本精神還在), 參看...(還沒寫完)
  • 進 browser 的 debug 模式 (按 F12) 有更進一步的工具協助我們偵錯, 如: IE 有 "DOM 總管", chrome 有 "elements"

設定值後面有附加 !important 的 style 屬性, 就是 author import 的部份, 要 normal 的部份都套用過了之後才套用 (優先權比 author normal 高)

  • 設定值附有 !important 的 selector 重覆時, 處理原則和前面一樣
div { color: gray !important; }


例子

<head>
<title>Test</title>
<style type="text/css">
div {
 font-family: Arial; font-size: 18pt;
 font-weight: bold;  color: black;
 margin: 10px;
 border: 1px solid blue;
}
p {
 border: 1px solid red;
 margin: 8px;
}
.nClass { margin: 0px; }
#nId1 { color: green; }
#nId2 { color: gray; }
</style>
</head>
<body>
<div>
<p>This is a Sample paragraph.</p>
<p id="nId1">This is a Sample paragraph.</p>
<p class="nClass">This is a Sample paragraph.</p>
<p class="nClass" id="nId2">This is a Sample paragraph.</p>
</div>
</body>
</html>

說明:

  • 第21行: 繼承: div, 套用次序: p
  • 第22行: 繼承: div, 套用次序: p, #nId1
  • 第23行: 繼承: div, 套用次序: p, .nClass
  • 第24行: 繼承: div, 套用次序: p, .nClass, #nId2

結果應該是這個樣子

CSS Sample

    文章標籤

    stylesheet HTML CSS

    全站熱搜

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()