Copyright © 2008 ~ 2024 MUKI space* / omegaBook theme All Rights Reserved.

之前在寫 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 可以直接寫成:

h1 {
  color: red;
}

p {
  color: black;
}

Descendant selectors (後代選擇器)

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

<style>
/* 選擇器依序從外而內,單獨設定在 h1 底下的 a 選擇器。兩個選擇器之間用空白鍵做分隔。 */
h1 a {
  color: red;
} 
a {
  color: black;
}
</style>

<div>
  <h1><a href="http://xxx">同時被 h1 以及 a 這兩個選擇器包圍,我的連結顏色為紅色</a></h1>
  <a href="http://xxx">只被 a 這個選擇器包圍,我的連結顏色為黑色</a>
</div>

Child selectors (子選擇器)

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

<style>
div > #child {
  color:red;
}
</style>


<div>
  <p>
    <span id="child">我和 div 中間有個 p ,所以不會變色</span>
  </p>
</div>

<div>
  <span id="child">我緊緊跟著 div,所以會變色</span>
</div>

Adjacent sibling selectors (相鄰選擇器)

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

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

<style>
h1 + h1 {
  color: red;
}

h1 + h1 + h1 {
  color: green;
}
</style>

<h1>段落一,我是黑色(預設顏色)</h1>
<h1>段落二,我是紅色(h1 + h1)</h1>
<h1>段落三,我是綠色(h1 + h1 + h1)</h1>

Attribute selectors (屬性選擇器)

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

h2[class]

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

<style>
h2 {
  color: red;
}
</style>

<h2>我是紅色</h2>
<h2 class="title">我是紅色</h2>
<h2 class="nav title">我是紅色</h2>
<h2 class="title-a-b">我是紅色</h2>
<h2 class="title sidebar">我是紅色</h2>

h2[class=title]

符合含 class=title 的 h2 標籤

<style>
body {
  color: black;
}
h2[class=title] {
  color: red;
}
</style>
 
<h2>我是黑色</h2>
<h2 class="title">我是紅色</h2>
<h2 class="nav title">我是黑色</h2>
<h2 class="title-a-b">我是黑色</h2>
<h2 class="title sidebar">我是黑色</h2>

h2[class~=title]

只要 class 裡頭有包含 title 文字的 h2 標籤即可

<style>
body {
  color: black;
}
h2[class~=title] {
  color: red;
}
</style>
 
<h2>我是黑色</h2>
<h2 class="title">我是紅色</h2>
<h2 class="nav title">我是紅色</h2>
<h2 class="title-a-b">我是黑色</h2>
<h2 class="title sidebar">我是紅色</h2>

h2[class|=title]

class 的開始值必須為 title 的 h2 標籤

<style>
body {
  color: black;
}
h2[class|=title] {
  color: red;
}
</style>
 

<h2>我是黑色</h2>
<h2 class="title">我是紅色</h2>
<h2 class="nav title">我是黑色</h2>
<h2 class="title-a-b">我是紅色</h2>
<h2 class="title sidebar">我是紅色</h2>

Class selectors (Class選擇器)

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

<style>
.value {
  color: red;
}
</style>

<div class="value">紅色文字</div>

ID selectors (ID選擇器)

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

<style>
#value {
  color: red;
}
</style>

<div id="value">紅色文字</div>

Pseudo-classes (偽類)

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

:first-child

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

<style>
p:first-child {
  color: red;
}
</style>

<p>此段會變紅色</p>
<div>此段不會變色</div>

:lang

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

<style>
p:lang(fr) {
  color: red;
}
</style>


<p lang="fr">紅色</p>
<p lang="en">不會變色</p>

Pseudo-elements (偽元素)

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

:first-line

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

<style>
p:first-line {
  color: red;
}
</style>

<p>第一行變紅色</p>
<p>第二行不變色</p>

:first-letter

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

<style>
p:first-letter {
  color: red;
}
</style>


<p>首字變色<br />
第二行</p>

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

歡迎給我點鼓勵,讓我知道你來過 :)

Subscribe
Notify of
guest

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

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