CSS

CSS樣式優先權

• 元素標籤內樣式設定 > style標籤內樣式設定 > link檔案樣式設定 ≥ import檔案樣式設定
  • 元素標籤內樣式設定

    <div style="color: Red"> </div>
    

  • style標籤內樣式設定

    <style type="text/css">
        div { color: Red; }
    </style>
    

  • link檔案樣式設定

    <link href="myStyle.css" rel="stylesheet" type="text/css" />
    

  • import檔案樣式設定

    <style type="text/css">
        @import url("myStyle.css");
    </style>
    

• link檔案樣式設定理論上和mport檔案樣式設定優先權相同，但大都瀏覽器會給予link檔案樣式設定較高優先權
• 後面設定的樣式有較高的優先權
  • 一般瀏覽器對樣式設定的處理順序為
    1. import檔案樣式設定
    2. link檔案樣式設定
    3. style標籤內樣式設定
    4. 元素標籤內樣式設定
  • 同一個檔案內由上而下處理
  • 當後面處理到同元素同樣式的情況時，會把先前處理覆蓋掉
  • 在style標籤內樣式設定對同一個Span元素分別做字型顏色設定為灰色及藍色，在瀏覽器上顯示時為藍色，而不會是灰色

    <style type="text/css">
        #spanId { color: Gray; }
        span { color: Blue; }
    </style> 
    
    <span id="spanId">Blue</span>