iT邦幫忙

2021 iThome 鐵人賽
DAY 6
0
Modern Web

Modern CSS 超詳細新手攻略系列 第 9 篇

[13th-鐵人賽]Day 9:Modern CSS 超詳細新手攻略 - Specificity

13th鐵人賽
599 瀏覽

  • 分享至 

  • xImage
    •  

今天要講的主題是權重，權重在CSS中扮演著裁決者的角色，在被重複賦予樣式時，決定最終該顯示哪一個樣式。

https://ithelp.ithome.com.tw/upload/images/20210914/20141395MA5BQukNLY.jpg
權重可以轉換成圖中分數:

  1. 千位數為inline-style
  2. 百位數為id
  3. 十位數為class或attribute
  4. 個位數為element
    https://ithelp.ithome.com.tw/upload/images/20210914/20141395HEwRHWS8Ny.jpg

影響樣式的其他因素

  1. 權重疊加:可以透過選擇器疊加增加權重分數
    https://ithelp.ithome.com.tw/upload/images/20210914/20141395DyVvi64je7.jpg
  2. 先後順序:後寫的樣式可以蓋掉之前寫的樣式
  3. 大魔王important:!important可以蓋掉所有的權重

總結
權重強度:!important > inline style > #id > .class > element

Challenge

https://ithelp.ithome.com.tw/upload/images/20210914/2014139536bScuCejR.jpg


上一篇
[13th-鐵人賽]Day 8:Modern CSS 超詳細新手攻略 - 偽元素 Pseudo Element
下一篇
[13th-鐵人賽]Day 10:Modern CSS 超詳細新手攻略 - background
系列文
Modern CSS 超詳細新手攻略 共 11 篇
  1. 7
    [13th-鐵人賽]Day 7:Modern CSS 超詳細新手攻略 - 偽類 Pseudo Classes
  2. 8
    [13th-鐵人賽]Day 8:Modern CSS 超詳細新手攻略 - 偽元素 Pseudo Element
  3. 9
    [13th-鐵人賽]Day 9:Modern CSS 超詳細新手攻略 - Specificity
  4. 10
    [13th-鐵人賽]Day 10:Modern CSS 超詳細新手攻略 - background
  5. 11
    [13th-鐵人賽]Day 11:Modern CSS 超詳細新手攻略 - Position (一)
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙