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 部分:
內容
結果:
CSS 的宣告分為三個部分:
「container」是「選擇器名稱」,如果我們是用 class=”” 來套用的話,名稱前面要加一個「 . 」,選擇器名稱後面街上「{ 」和「} 」然後在裡面放入屬性和值。
「font-size」叫做「屬性」,像這個屬性就是要宣告文字的大小,後面用「:」來連接「值」;
「18px」這個部分叫做「值」,也就是前面那個屬性的值,值得後面記得加上「 ; 」表示這一部分宣告完畢。下面還可以接上多組屬性和值。
CSS 部分:
div{
font-size: 18px;
width: 200px;
color:red;
background-color:yellow;
margin:10px;
}
HTML 部分:
內容
另一個div內容
結果:
如果你的選擇器就是 HTML 標籤,比如說 div 或是 p 等等。
在宣告CSS時則不需要在選擇器名稱前面加上「. 」
套用時,只要出現那個HTML標籤,就會套用該CSS
CSS 部分:
#abc{
font-size: 18px;
width: 200px;
color:red;
background-color:yellow;
margin:10px;
}
HTML 部分:
內容
結果:
如果是要用 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 部分:
內容
結果:
我們也可以同時套用2個以上的 class,用空個分開就可以了。
CSS 部分:
.aaa .bbb{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
}
.bbb{
color:black;
}
HTML 部分:
here
but not here
結果:
選擇器下一層的選擇器
例如要限定宣告 .aaa 下的 .bbb 選擇器(沒有在 .aaa 樣式下的 .bbb 都不會受影響)
CSS 部分:
*{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
and here
結果:
套用到所有的元件
直接使用「*」表示即可。
*
CSS 部分:
div *{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
and here
but not here
結果:
套用到某HTML標籤下的任何元件和選擇器
如:要套用到 div 下面的任何元件和選擇器
*
CSS 部分:
table + div{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
結果:
ABC
here
but not here
套用到位於 HTML 標籤A之後「緊接的」 HTML 標籤B
▼如
標籤之後的
標籤
+
CSS 部分:
table ~ div{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
and here
結果:
套用到 HTML 標籤 A 之後的標籤直到最後一個 HTML 標籤B為止
套用到
標籤後的所有
標籤,直到被其他標籤中斷。
~
CSS 部分:
table > p{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
but not here
結果:
herebut not here
限定套用到直接位於HTML標籤 A 下一層的HTML標籤 B
>
CSS 部分:
table div:first-child{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
but not here
not here
結果:
herebut not herenot here
套用到 HTML 標籤A下的「第一個」HTML 標籤B
:first-child
CSS 部分:
table *:only-child{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
here
and here
but not here
not here as well
結果:
hereand herebut not herenot 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 部分:
not here
not here
here
not here
結果:
not here not herehere 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;
}
not here
here
not here
not here
結果:
not herehere 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 部分:
not here
here
not here
not here
結果:
not herehere 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;
}
1
2
3
4
結果:
12
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 部分:
1
2
3
結果:
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 部分:
123
結果:
123
套用到沒有子代項目的元件
▼語法 :empty
CSS 部分:
div:not(.box){
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
123
123
結果:
123123
排除設有某個選擇器的標籤
使用 :not(.選擇器名稱)
CSS 部分:
div[class]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
123
123
結果:
123123
有宣告套用某類別的元件
比如說有宣告 class 的 div 元件就用以下表示:div[class]
CSS 部分:
div[class^="b"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
1
2
3
結果:
123
有宣告套用「某些」屬性的元件,且知道屬性名稱「開頭若干字母」
例:div[class^=”b”]
CSS 部分:
div[class$="g"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
1
2
3
結果:
123
有宣告套用「某些」屬性的元件,且知道屬性名稱「結尾若干字母」
例:div[class$=”g”]
CSS 部分:
div[class*="go"]{
width: 200px;
font-size:18px;
background-color:yellow;
margin:10px;
color:black;
}
HTML 部分:
1
2
3
結果:
123
有宣告套用「某些」屬性的元件,且知道屬性名稱「中間若干字母」
關於 CSS 套用有一個線上遊戲可以玩,參考這一篇:CSS 線上遊戲