iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

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

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

  • 分享至 

  • 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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言