Day 17 | CSS Selectors - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 17

0

自我挑戰組

菜鳥前端修練之旅系列第 17 篇

Day 17 | CSS Selectors

14th鐵人賽

2022-10-02 14:13:03

531 瀏覽

分享至

最近在在看 CSS 面試題目時發現，許多選擇器代表的意思我都回答不出來，像是 ~、+ 之類的，這篇趕緊紀錄一下把基礎打好一點。

基本選擇器

選擇器	範例	解釋
`*`	*	選擇全部
`.`	.info	選擇所有 `class` 為的 info 元素
`#`	#info	選擇所有 `id` 為的 info 元素
`element`	div	選擇所有 `div`

屬性選擇器

選擇器	範例	解釋
`[attr]`	`[title]`	選擇屬性有 `title` 的所有元素
`[attr=value]`	`[title="a"]`	選擇屬性 `title` 為 `blog` 的所有元素
`[attr~=value]`	`[title~="a"]`	選擇屬性有 `title` 有 `a` 的所有元素（title 有多個屬性）
`[attr	=value]`	`[title
`[attr^=value]`	`[title^="a"]`	選擇屬性 `title` 開頭為 `a` 的所有元素
`[attr$=value]`	`[title$="a"]`	選擇屬性 `title` 結尾為 `a` 的所有元素
`[attr*=value]`	`[title*="a"]`	選擇屬性 `title` 包含 `a` 的所有元素

複合選擇器

選擇器	範例	解釋
`+`	div + p	選擇與 `div` 同層且緊鄰的 `p`
`~`	div ~ p	選擇與 `div` 同層的所有 `p`
`>`	div > p	選擇 `div` 下一層的所有 `p`
A B	div p	選擇 `div` 底下的所有 `p`

nth 系列

選擇器	範例	解釋
`:nth-child(n)`	p:nth-child(2)	選擇同層的第二個 `p`
`:only-child`	p:only-child	選擇同層的唯一一個 `p`
`:first-child`	p:first-child	選擇同層的第一個 `p`
`:last-child`	p:last-child	選擇同層的最後一個 `p`
`:nth-last-child(n)`	p:nth-last-child(2)	選擇同層的倒數第二個 `p`

偽元素

選擇器	範例
`::before`	p::before
`::after`	p::after

兩個冒號 :: 是 CSS3 的寫法，偽元素寫一個或兩個都可以。

參考資料

Day 16 | 立即函式 IIFE

Day 18 | 表達式與陳述式

系列文

菜鳥前端修練之旅共 30 篇

目錄

RSS系列文訂閱系列文

4 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

133 組

團體組數

1 組

累計文章數

182 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙