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 標籤A之後「緊接的」 HTML 標籤B

▼如

標籤之後的

標籤

+

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 標籤B為止

套用到

標籤後的所有

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

~

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
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
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
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>
				
			

結果:

1

2

3

4

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>
				
			

結果:

1
2
3

套用到相同階層「只有單一元件」的項目 (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
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
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>
				
			

結果:

1
2
3

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

例: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>
				
			

結果:

1
2
3

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

例: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>
				
			

結果:

1
2
3

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

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