Try   HackMD

CSS 選擇器與權重

基本選擇器

CSS 優先順序為由上到下,若有相同則看權重。

/* 通用選擇,權重 0 */ * { color: white; } /* 標籤元素選擇,權重 1 */ ul { color: white; } /* class 選擇,權重 10 */ .main { color: blue; } /* 屬性選擇,權重 10 */ [type='button'] { color: red; } /* 狀態選擇,權重 10 */ a:hover { color: grey; } /* id 選擇,權重 100 */ #main { color: red; } /* inline style,權重 1000 * <div style="color: red;"> */ /* !important,權重 10000 */ .pt-5 { padding-top: 4rem !important ; }

複合選擇器

/* 相鄰選擇器,不包含自己,選取相鄰元素 */ li + li { color:red; } /* 連號選擇器,不包含自己,選取同層指定的元素,會跳過未指定的元素 */ h2 ~ p { color: red; } /* 選擇第一個子元素 */ ul > li { color: red; } /* 後代選擇,ul 內所有 p 標籤 */ ul p { color:blue; }

參考來源

  1. MDN - CSS 選擇器
  2. 小艾 ( iris ) - Day20:小事之 CSS 權重 (css specificity)
  3. CSScoke - 親代選取器之妹妹選取器與鞭炮串選取器