CSS 語法：選擇器 class 與 id 以及階層關係

CSS 怎麼套用？

我們如果用 Chrome 瀏覽器於 WordPress 建置的網站頁面上任何地方按滑鼠「右鍵 > 檢查」，會保出一個分割視窗，上面佈滿了程式碼。其中我們會看到類似 <div class=”container group“>…</div>這樣的語法，這個意思就是這個 div (可以把它視為網頁上的一個「區塊」)套用了CSS 選擇器名為 “container” 以及 “group”的這兩個樣式。

關於 WordPress 的 CSS 位置尋找和套用請參考：自訂CSS 調整 WordPress 文字、顏色、背景、寬度等

CSS 部分：

				
					.container{
font-size: 18px;
width: 200px;
color:red;
background-color:yellow;
}

HTML 部分：

				
					<div class="container">內容</div>

結果：

內容

CSS 的宣告分為三個部分：

「container」是「選擇器名稱」，如果我們是用 class=”” 來套用的話，名稱前面要加一個「 . 」，選擇器名稱後面街上「{ 」和「} 」然後在裡面放入屬性和值。

「font-size」叫做「屬性」，像這個屬性就是要宣告文字的大小，後面用「：」來連接「值」；

「18px」這個部分叫做「值」，也就是前面那個屬性的值，值得後面記得加上「 ; 」表示這一部分宣告完畢。下面還可以接上多組屬性和值。

CSS 部分：

				
					div{
font-size: 18px;
width: 200px;
color:red;
background-color:yellow;
margin:10px;
}

HTML 部分：

				
					<div>內容</div>
<div>另一個div內容</div>

結果：

內容

另一個div內容

如果你的選擇器就是 HTML 標籤，比如說 div 或是 p 等等。
在宣告CSS時則不需要在選擇器名稱前面加上「. 」
套用時，只要出現那個HTML標籤，就會套用該CSS

CSS 部分：

				
					#abc{
font-size: 18px;
width: 200px;
color:red;
background-color:yellow;
margin:10px;
}

HTML 部分：

				
					<div id="abc">內容</div>

結果：

內容

如果是要用 id 套用，則是在css選擇器前面加上一個「#」

CLASS 和 ID 的差別

基本上 CLASS 的方式比較常被使用，因為每一個元素只能套用一個id，而 CLASS 則沒有限制。

但是 ID 選擇器可以被 Javascript 的函數 (GetElementByID)所辨識，因此如果你需要使用 javascript 的 GetElementByID，就必須使用 ID 選擇器。

CSS 部分：

				
					.aaa{
color: #0000FF;
width: 200px;
}

.bbb {
font-size:18px;
background-color:yellow;
margin:10px;
}

HTML 部分：

				
					<div class="aaa bbb">內容</div>

結果：

內容

我們也可以同時套用2個以上的 class，用空個分開就可以了。

CSS 部分：

				
					.aaa .bbb{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
}

.bbb{
color:black;
}

HTML 部分：

				
					<div class="aaa">
<p class="bbb">here</p>
</div>

<p class="bbb">but not here</p>

結果：

here

but not here

選擇器下一層的選擇器

例如要限定宣告 .aaa 下的 .bbb 選擇器(沒有在 .aaa 樣式下的 .bbb 都不會受影響)

CSS 部分：

				
					*{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div>here</div>

<p>and here</p>

結果：

here

and here

套用到所有的元件

直接使用「*」表示即可。

*

CSS 部分：

				
					div *{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div><table>here</table></div>

<div><p class="bbb">and here</p></div>

<p class="bbb">but not here</p>

結果：

here

and here

but not here

套用到某HTML標籤下的任何元件和選擇器

如:要套用到 div 下面的任何元件和選擇器

*

CSS 部分：

				
					table + div{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

結果：

				
					<table>ABC</table>
<div>here</div>
<div>but not here</div>

here

but not here

套用到位於 HTML 標籤Ａ之後「緊接的」 HTML 標籤Ｂ

▼如

標籤之後的

標籤

+

CSS 部分：

				
					table ~ div{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<table></table>
<div>here</div>
<div>and here</div>
<iframe><div>but note here</div></iframe>

結果：

here

and here

but not here

套用到 HTML 標籤 A 之後的標籤直到最後一個 HTML 標籤Ｂ為止

套用到

標籤後的所有

標籤，直到被其他標籤中斷。

~

CSS 部分：

				
					table > p{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<table><p>here</p><table>

<table><div>but not here</div><table>

結果：

here

but not here

限定套用到直接位於HTML標籤 A 下一層的HTML標籤 B

>

CSS 部分：

				
					table div:first-child{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<table>
<div>here</div>
<div>but not here</div>
<div>not here</div>
</table>

結果：

here

but not here

not here

套用到 HTML 標籤A下的「第一個」HTML 標籤B

:first-child

CSS 部分：

				
					table *:only-child{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<table>
<div>here</div>
</table>

<table> 
<p>and here</p> 
</table>

<table>
<div>but not here</div>
<div>not here as well</div>
</table>

結果：

here

and here

but not here

not here as well

套用到 HTML 標籤A下「有單一子項目」的元件

*:only-child

CSS 部分：

				
					.aaa p:nth-child(3){
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div calss="aaa">
<p>not here</p>
<div>not here</div>
<p>here</p>
<p>not here</p>
</div>

結果：

not here

here

not here

套用到第 N 個相同階層的子代元件

這個比較常用在表格，比如說要設定奇數列的背景色，可以用 tr:nth-child(odd) 表示，若是偶數行則是 tr:nth-child(even)

nth-child 屬於「偽類選取器」它是選取順序，而會忽略屬性。

以左列範例來說，他不是作用在.aaa 下的第三個

標籤，而是作用在「第3個標籤」不管是

或

都一起算進去。

所以其實 nth-child(n) 的重點是選取「相同階層」的第 n 個元件，也因此上方的宣告可以省略p，變成如下，結果是一樣的。

				
					.aaa :nth-child(3){
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

但是不能要選則的標的是 <p> 卻用 <span> 宣告，如下是不會套用到任何元件的

:nth-child()

CSS 部分：

HTML 部分：

				
					div :nth-last-child(3){
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

				
					<div>
<p>not here</p>
<div>here</div>
<p>not here</p>
<p>not here</p>
</div>

結果：

not here

here

not here

套用到「倒數」第 N 個相同階層的子代元件

▼和上方的使用方式相同，只是元件是從後方數過來第幾個，使用 nth-last-child(n) 語法。

:nth-last-child()

CSS 部分：

				
					div p:first-of-type {
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div>
<div>not here</div>
<p>here</p>
<p>not here</p>
<p>not here</p>
</div>

結果：

not here

here

not here

套用到第 1 個相同屬性的子代元件

既然上方的 nth-child(n) 無法判斷屬性，那如果我們只想去數相同屬性的第幾個就要用

:first-of-type

:last-of-type

:nth-of-type()

這幾個語法。

例：

				
					div p:nth-of-type(2) {
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

				
					<div>
<div>1</div>
<p>2</p>
<p>3</p>
<p>4</p>
</div>

結果：

nth-of-type(n) 裡面的 n 除了填數字以外，一樣可以填「odd」代表奇數、「even」代表偶數。

CSS 部分：

				
					div p:only-of-type{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					


<div>
<p>1</p>
</div>

<div>
<p>2</p>
<p>3</p>
</div>

結果：

套用到相同階層「只有單一元件」的項目 (The element that has no siblings of the given type.)

CSS 部分：

				
					.box:empty{
background-color:yellow;
}

.box{
background-color:orange;
width:200px;
height:100px;
color:white;
}

HTML 部分：

				
					<div class="box"></div>
  <div class="box">123</div>

結果：

123

套用到沒有子代項目的元件

▼語法 :empty

CSS 部分：

				
					div:not(.box){
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div>123</div>

<div class="box">123</div>

結果：

123

排除設有某個選擇器的標籤

使用 :not(.選擇器名稱)

CSS 部分：

				
					div[class]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div class="box">123</div>
<div>123</div>

結果：

123

有宣告套用某類別的元件

比如說有宣告 class 的 div 元件就用以下表示：div[class]

CSS 部分：

				
					div[class^="b"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div class="box">1</div>
<div class="bag">2</div>
<div class="cat">3</div>

結果：

有宣告套用「某些」屬性的元件，且知道屬性名稱「開頭若干字母」

例：div[class^=”b”]

CSS 部分：

				
					div[class$="g"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div class="egg">1</div>
<div class="dog">2</div>
<div class="cat">3</div>

結果：

有宣告套用「某些」屬性的元件，且知道屬性名稱「結尾若干字母」

例：div[class$=”g”]

CSS 部分：

				
					div[class*="go"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}

HTML 部分：

				
					<div class="ngo">1</div>
<div class="hahaha">2</div>
<div class="gogoro">3</div>

結果：

有宣告套用「某些」屬性的元件，且知道屬性名稱「中間若干字母」

關於 CSS 套用有一個線上遊戲可以玩，參考這一篇：CSS 線上遊戲

Daco Note

CSS 語法：選擇器 class 與 id 以及階層關係

CSS 怎麼套用？

CLASS 和 ID 的差別

選擇器下一層的選擇器

套用到所有的元件

*

套用到某HTML標籤下的任何元件和選擇器

*

套用到位於 HTML 標籤Ａ之後「緊接的」 HTML 標籤Ｂ

+

套用到 HTML 標籤 A 之後的標籤直到最後一個 HTML 標籤Ｂ為止

~

限定套用到直接位於HTML標籤 A 下一層的HTML標籤 B

>

套用到 HTML 標籤A下的「第一個」HTML 標籤B

:first-child

套用到 HTML 標籤A下「有單一子項目」的元件

*:only-child

套用到第 N 個相同階層的子代元件

:nth-child()

套用到「倒數」第 N 個相同階層的子代元件

:nth-last-child()

套用到第 1 個相同屬性的子代元件

:first-of-type

:last-of-type

:nth-of-type()

套用到相同階層「只有單一元件」的項目 (The element that has no siblings of the given type.)

套用到沒有子代項目的元件

排除設有某個選擇器的標籤

有宣告套用某類別的元件

有宣告套用「某些」屬性的元件，且知道屬性名稱「開頭若干字母」

有宣告套用「某些」屬性的元件，且知道屬性名稱「結尾若干字母」

有宣告套用「某些」屬性的元件，且知道屬性名稱「中間若干字母」