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

CSS 怎麼套用?

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

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

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

那套用名為 container 這個 CSS 長什麼樣子?

CSS 如何宣告?

CSS 的宣告分為三個部分:

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

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

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

套用範例:<div class=”container“>內容</div>

 

.container{
font-size: 18px;
width: 200px;
}

 

▼如果你的選擇器就是 HTML 標籤,比如說 div 或是 p 等等。
在宣告CSS時則不需要在選擇器名稱前面加上「. 」
套用時,只要出現那個HTML標籤,就會套用該CSS,如:<div>內容</div>
*如果你還不熟悉HTML語法也沒關係,你只要先認得<div>是一個區塊標籤、<p>是一個段落標籤、<a>是要下連結的語法、<img>是要顯示圖片的語法,就這4個 html 語法是 WordPress 裡面最常見的。

div{
font-size: 18px;
width: 200px;
}

 

 

▼如果是要用 id 套用,則是在前面加上一個「#」
套用時,要用id 來套用,如:<div id=”idname“>內容</div>

#idname{
font-size: 18px;
width: 200px;
}

 

CLASS 與 ID

• CLASS 選擇器

選擇器有兩種形式,一種是用「class」來套用,另一種用「ID」來套用。
▼這兩種在宣告CSS時寫法有點不一樣,要用class套用時,選擇器名稱前面要有一個「.」如:

.abc {
color: #0000FF;
}

▼套用語法如下:

<p class="abc">用class套用的情況</p>

▼我們也可以同時套用2個以上的 class,如下:

.aaa{
color: #0000FF;
}

.bbb {
font-size:18px;
}

▼同時套用到HTML時用以下語法

<p class="aaa bbb">套用多個class</p>

以上的結果顯示為:
套用多個class

• ID 選擇器

▼用 id 語法套用時,CSS 的選擇器前面要加一個「#」,如下:

#apple {
color:#FF0000;
}

▼套用時用以下語法表示:

<p id="apple">用 id 選擇器</p>

• CLASS 和 ID 的差別

基本上 CLASS 的方式比較常被使用,因為 ID 選擇器在一個 HTML 文件裡面只能被使用一次,而 CLASS 則沒有限制。

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

[h5p id=”1″]

➤ 跳到問答區,回答 id 選擇器和 class 選擇器有什麼不同

 

CSS 選擇器的階層關係表示

一般性的原則是用空格來表示下一階層,但如果是要表示 HTML 標籤裡面的選擇器則是直接接上去,不用空格。如:「 div.aaa 」

 

選擇器下一層的選擇器

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

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

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

▼就用如下表示

.aaa .bbb{
/*styles here*/
}

 

HTML 標籤「裡面的」的選擇器

▼如果是要限定 div(html 標籤) 下面的 .aaa 選擇器

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

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

▼就用如下表示

div.aaa{
/*styles here*/
}

 

套用到所有的元件

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

*{
/*styles here*/
}

 

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

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

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

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

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

▼用如下宣告,標籤後空一格打「*」

div *{
/*styles here*/
}

******以下內容有點繁瑣,如果你是初學建議先跳到下一章節,之後有需要再回來看******

 

套用到位於 HTML 標籤A「之後的」 HTML 標籤B

▼如 </table> 標籤之後的 <div> 標籤

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

▼如下宣告:用「空格+空格」連接

table + div{
/*styles here*/
}

 

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

▼套用到</table>標籤後的<div>標籤,直到最後一個<div>

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

▼如下宣告:用「空格+空格」連接

table ~ div{
/*styles here*/
}

 

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

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

<table><div>but not here</div><table>
table > p{
/*styles here*/
}

 

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

<table>
<div>here</div>
<div>but not here</div>
<div>not here as well</div>
</table>
table div:first-child{
/* styles here */
}

 

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

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

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

<table>
<div>but not here</div>
<div>not here as well</div>
</table>
table *:only-child{
/* styles here */
}

 

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

▼套用到以下第3個 <p> 標籤

<div class="aaa">
<p>not here</p>
<p>not here</p>
<p>here</p>
<p>not here</p>
</div>
.aaa p:nth-child(3){
/*styles here*/ 
}

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

nth-child 屬於「偽類選取器」它是選取順序,而會忽略屬性。
▼比如說如下 <div> 裡面有2個 <span> 和2個 <p> 在相同階層

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

▼我們做以下宣告

div p:nth-child(2){
background-color: #f90;
width:100px;
}

▼果會是作用在 2 而不是 3

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

div :nth-child(2){
background-color: #f90;
width:100px;
}

▼但是不能要選則的標的是 <p> 卻用 <span> 宣告,如下是不會套用到任何元件的,因為在同階層的第二個項目不是 <span>

div span:nth-child(2){
background-color: #f90;
width:100px;
}

 

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

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

div p:nth-last-child(3){
background-color: #f90;
width:100px;
}

 

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

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

▼我們一樣要套用到 數字「2」的位置

<div >
<span>1</span>
<p>2</p>
<p>3</p>
<span>4</span>
</div>
div p:first-of-type {
background-color: #f90;
width:100px;
}

 

套用到最後一個相同屬性的子代元件

和上方用法類似,語法改成 last-of-type

 

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

▼使用 nth-of-type(n)

<div >
<span>1</span>
<p>2</p>
<p>3</p>
<span>4</span>
</div>
div p:nth-of-type(2) {
background-color: #f90;
width:100px;
}

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

<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
div p:nth-of-type(odd) {
background-color: #f90;
width:100px;
}

*如果是偶數除了用 nth-of-type(even),也可以用 nth-of-type(2n) 表示。

而如果是偶數並且從第三個開始算起,就是 nth-of-type(2n+3)

 

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

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

<div>
<p>2</p>
<p>3</p>
</div>
div p:only-of-type {
background-color: #f90;
width:100px;
}

 

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

▼語法 :empty

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

<div class="box">
OOO
</div>
.box{
border:2px #bbb solid;
width:100px;
height:100px;
}

div:empty{
background-color: #f90;
}

▼因為第一個 <div> 下面沒有任何東西,所以套用背景色。

 

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

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

<div class="box">1</div>
<div>2</div>
.box{
color:red;
}

div:not(.box){
background-color: #f90;
}

 

有宣告套用某類別的元件

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

<div class="box">1</div>
<div>2</div>
div[class]{
background-color:#fc0;
}

有宣告套用某屬性的元件

和上方相似,可是更限縮範圍到某類別的某屬性,比如說套用 class 選擇器的某個選擇器。

<div class="box">1</div>
<div class="bag">2</div>
div[class="bag"]{
background-color:#fc0;
}

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

例:div[class^=”b”]

<div class="box">1</div>
<div class="bag">2</div>
<div class="cat">3</div>
div[class^="b"]{
background-color:#fc0;
}

 

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

例:div[class$=”g”]

<div class="egg">1</div>
<div class="cat">2</div>
<div class="dog">3</div>
<style type="text/css">
div[class$="g"]{
background-color:#fc0;
}

 

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

<div class="ngo">1</div>
<div class="hahaha">2</div>
<div class="gogoro">3</div>
div[class*="go"]{
background-color:#fc0;
}

[badgeos_achievement id=”4058″] [badgeos_submission achievement_id=”4058″]

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…