同輩
| Syntax | Mean | Selector |
|---|---|---|
| A, B | A 跟 B | h1, h2 |
| A + B | 緊接 A 後面的 B | h1 + p |
| A ~ B | A 後面的所有 B | h1 ~ p |
父子
| Syntax | Mean | Selector |
|---|---|---|
| A a | A 裡的所有 a(含子層/子子層…) | p span |
| A > a | A 下一子層裡的 a(不含子子層) | article>h2 |
偽類
- 如果同時定義
<a>的四種偽類，一般狀況應依此順序指定
a:link→a:visited→a:hover→a:active，不然會有樣式覆蓋的問題（除非特殊設計考量）
| Syntax | Mean | Selector |
|---|---|---|
| :hover | 游標移到時 | a:hover |
| :active | 點擊當下(按下去到放開間) | a:active |
偽元素
| Syntax | Mean | Selector |
|---|---|---|
| ::before | 在原 Element 的後面增加另一個 Element | a:before |
| ::after | 在原 Element 的前面增加另一個 Element | a:after |