iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

30天搞定CSS及切版系列 第 5

CSS 權重優先級

  • 分享至 

  • xImage
  •  

前言

偶爾寫CSS時會發現改了顏色、寬高但沒有任何效果,就有可能是優先級搞出的問題唷。
所以搞清楚CSS是如何套用按權重套用樣式也是很重要的~

主要三種元素套用CSS的方式

inline 行內樣式

把CSS寫在元素內,Like:

<div style="background-color: pink;">
    行內樣式
</div>

元素插入 style ="" 就可以對元素設定CSS,權重也是三者裏最高的~

頁面樣式

通常撰寫於header內,Like:

<head>
     <style>
         nav {
             width:100px;
             height:100px;
             background-color:pink;
         }
     <style>
</head>

在這裡可以設定此頁面元素的CSS,權重視三者里的中間位。

外部載入

使用外部的CSS樣式檔案,Like:

<link rel="stylesheet" href="css/style.css">

權重輸以上兩者。
若兩個外部載入的檔案都有設定同一個元素的屬性,則會套用排序最後的外部CSS檔案。

選擇器權重

ID > CLASS > 元素


上一篇
尺寸單位 px、em、rem
下一篇
CSS選擇器
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言