CSS 選擇器概略說明

之前在寫 css 教學的時候,在「不可不知篇」裡頭曾經提到 id 以及 class 的差異。其實 css 選擇器的範圍是很廣泛的, id. class 這種屬性只佔了其中一小部分,為了怕大家以為 css 裡頭只有 id, class 的存在,所以我特地將 css 2.1 版的選擇器做一個概略說明,希望讀完這篇大家對於 css 的運用能更加靈活

根據 W3C 網站公佈的 css 2.1 selector syntax 可以得知目前有10 種不同的選擇器

Universal selector (通用選擇器)

使用字元*,代表此張網頁都要套用*{}底下的設定。

Type selectors (屬性選擇器)

在 html 文件裡,他的標籤可以直接當做 css 裡頭的選擇器。例如 <h1>...</h1>, <p>...</p>, <div>...</div> 等等。

而 CSS 可以直接寫成:

CSS

Descendant selectors (後代選擇器)

某一段文字被兩個以上的選擇器包圍時,我們可以用這些選擇器彼此之間的關係來替文字做更進一步的樣式化。

HTML

Child selectors (子選擇器)

子選擇器有一種繼承的概念,你可以把它想成父子的關係,子一定要緊緊跟著父跑,要是中間插入任何一個元素,就不是父子關係了。 而子選擇器我們使用>符號,舉例如下:

HTML

Adjacent sibling selectors (相鄰選擇器)

如果說子選擇器是上下垂直的繼承概念,那麼相鄰選擇器就是左右平行的對等概念,而他使用的符號是+,只是我們很少用到這個寫法,其中一個原因是IE瀏覽器尚未支援。

我個人認為,相鄰選擇器使用的最好時機在於要對同個標籤進行不同的設置。假設今天我有三個段落都要使用 h1 標籤,可是我希望三個段落擁有不同的顏色(黑色、紅色、綠色),我可以這樣寫:

HTML

Attribute selectors (屬性選擇器)

顧名思義,就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型,分別為:

h2[class] //符合所有含 class 的 h2 標籤即可

HTML

h2[class=title] //符合含 class=title 的 h2 標籤

HTML

h2[class~=title] //只要 class 裡頭有包含 title 文字的 h2 標籤即可

HTML

h2[class|=title] //class 的開始值必須為 title 的 h2 標籤

HTML

Class selectors (Class選擇器)

使用 . 符號做宣告,後頭的屬性可以自己命名,一張網頁可以出現多個相同的 class 屬性值。

HTML

ID selectors (ID選擇器)

使用 # 符號做宣告,後頭的屬性值可以自己命名,但是一張網頁僅能出現一次相同的 ID (ID 為唯一)

HTML

Pseudo-classes (偽類)

偽類選擇器也許大家很少聽過,但是一說到a:linka:visiteda:hovera:active 這四個 css 應該就不陌生了吧,這四個選擇器都是屬於偽類的一種喔。另外還有:first-child, :foucs, :lang 這三種。

:first-child

X:first-child 符合父標籤中的第一個 X 標籤者才會有效用

HTML

:lang

X:lang(E) 符合 lang 為 E 的 X 標籤

HTML

Pseudo-elements (偽元素)

偽元素包含 :first-line 以及 :first-letter

:first-line

X:first-line 符合 X 標籤的第一行都會受影響

HTML

:first-letter

X:first-letter 符合 X 標籤的第一個字母會受影響

HTML

CSS 選擇器到此告一段落。這篇文章寫了兩天,一直在想要怎麼寫大家才可以更瞭解 css ,所以有看到最後的朋友,請受我一拜(笑)。因為這篇文章旨在概略說明,我只講大觀念,更細的東西幾乎都跳過了,以後有機會再分享更深入的應用給大家。

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
1 則留言
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Te Yen Liu
Te Yen Liu
5 years ago

請問為什麼你的子選擇器的結果無法變成紅色

粉絲團