📢 本文由 gemini-2.5-flash 翻譯
CSS 導入方式
CSS 有三種導入方式，第一種為內部樣式表，此方式僅供學習使用
1
2
3
4
5
6
7
8
9
10
| <html>
<head>
<title></title>
<style>
/* 此處寫 CSS */
</style>
</head>
<body>
</body>
</html>
|
第二種為行內樣式，一般搭配 JavaScript 使用
1
| <div style="此處寫 CSS"></div>
|
最後一種為外部樣式表，將 CSS 程式碼寫在獨立檔案，透過 link 標籤導入，開發時常用
1
2
3
4
| <head>
<title></title>
<link rel="stylesheet" href="css path" />
</head>
|
CSS 選取器
選取器的作用是尋找標籤，設定樣式，總共有四種基礎選取器
標籤選取器
直接使用標籤名稱作為選取器，即選取同名標籤設定相同的樣式
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<title></title>
<style>
div{
/* 選取所有 div 標籤設定樣式 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
可以使用的標籤有 p、h1、div、a、img 等
類別選取器
用於尋找標籤，差異化設定標籤的顯示效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<title></title>
<style>
.first{
/* 選取 first div 設定樣式 */
}
</style>
</head>
<body>
<div class="first">
first div
</div>
<div>
second div
</div>
</body>
</html>
|
類別名稱若是多個單字可使用 - 連接，一個類別選取器可供多個標籤使用，一個標籤可以使用多個類別名稱
1
2
3
| <div class="first second">
使用了兩個類別名稱
</div>
|
id 選取器
用於尋找標籤，差異化設定標籤的顯示效果，一般搭配 JavaScript 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<title></title>
<style>
#app{
/* 選取 id 為 app 的標籤 */
}
</style>
</head>
<body>
<div id="app"></div>
<div></div>
</body>
</html>
|
同一個 id 選取器在一個頁面只能使用一次
萬用字元選取器
尋找頁面所有標籤，設定相同樣式，一般用於清除標籤的預設樣式
1
2
3
4
5
| <style>
*{
/* 撰寫樣式會影響所有標籤 */
}
</style>
|
複合選取器
定義：由兩個或多個基礎選取器，透過不同的方式組合而成
作用：更精確、更有效率地選取目標元素 (標籤)
後代選取器
可以選取某元素的所有後代元素
語法：父選取器 子選取器 { CSS 屬性 }
父選取器與子選取器之間用空格隔開，可以為類別選取器或 id 選取器
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
div span{
color: aqua;
}
</style>
<span>顏色不會變</span>
<div>
<span>顏色會變</span>
<p>
<span>顏色會變</span>
</p>
</div>
|
子代選取器
只選取某元素的子級元素
語法：父選取器 > 子選取器 { CSS 屬性 }
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
div > span{
color: aqua;
}
</style>
<div>
<span>顏色會變</span>
<p>
<span>顏色不會變</span>
</p>
</div>
|
聯集選取器
選取多組標籤設定相同的樣式
語法：選取器1, 選取器2, ..., 選取器N { CSS 屬性 }
1
2
3
4
5
6
7
8
9
| <style>
div, span, p {
color: aqua;
}
</style>
<div>顏色會變</div>
<p>顏色會變</p>
<span>顏色會變</span>
|
交集選取器
選取同時符合多個條件的元素
語法：選取器1選取器2 { CSS 屬性 } 選取器之間連寫，沒有任何符號
如果交集選取器中有標籤選取器，標籤選取器必須寫在最前面
1
2
3
4
5
6
7
8
9
| <style>
p.box {
color: aqua;
}
</style>
<p class="box">顏色會變</p>
<p>p 標籤，顏色不會變</p>
<div class="box">顏色不會變</div>
|
偽類選取器
偽類表示元素狀態，選取元素的某個狀態設定樣式
滑鼠懸停狀態
語法：選取器:hover { CSS 屬性 }
1
2
3
4
5
6
7
8
9
10
11
12
13
| <style>
a:hover{
color: red;
}
.box:hover{
color: aqua;
}
</style>
<a href="https://yexca.net">yexca</a>
<div class="box">
div 標籤
</div>
|
任何標籤都可以設定滑鼠懸停的狀態
超連結的狀態
| 選取器 | 作用 |
|---|
| :link | 造訪前 |
| :visited | 造訪後 |
| :hover | 滑鼠懸停 |
| :active | 點擊時 (啟用) |
若要給超連結設定四個狀態，需依序撰寫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style>
a:link {
color: green;
}
a:visited {
color: red;
}
a: hover {
color: aqua;
}
a: active {
color: orange;
}
</style>
<a href="#">a 標籤</a>
|
結構偽類選取器
作用：根據元素的結構關係尋找元素
| 選取器 | 說明 |
|---|
| E:first-child | 選取第一個 E 元素 |
| E:last-child | 選取最後一個 E 元素 |
| E:nth-child(N) | 選取第 N 個 E 元素 (從 1 開始) |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <style>
li:first-child {
background-color: aqua;
}
li:last-child {
background-color: green;
}
li:nth-child(3) {
background-color: blue;
}
</style>
<ol>
<li>aqua</li>
<li>2</li>
<li>blue</li>
<li>4</li>
<li>green</li>
</ol>
|
其中第三個選取器可以使用公式選取多個元素
| 功能 | 公式 |
|---|
| 偶數個標籤 | 2n |
| 奇數個標籤 | 2n+1 或 2n-1 |
| 找到 5 的倍數的標籤 | 5n |
| 找到第 5 個以後的標籤 (包含 5) | n+5 |
| 找到第 5 個以前的標籤 (包含 5) | -n+5 |
偽元素選取器
作用：建立虛擬元素 (偽元素)，用來擺放裝飾性的內容
| 選取器 | 說明 |
|---|
| E::before | 在 E 元素裡面最前面新增一個偽元素 |
| E::after | 在 E 元素裡面最後面新增一個偽元素 |
注意：
- 必須設定 content 屬性，用來設定偽元素的內容，如果沒有內容，則引號留空
- 偽元素預設為行內顯示模式
- 優先權與標籤選取器相同
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style>
div {
width: 110px;
height: 30px;
background-color: aqua;
font-size: 20px;
}
div::before {
content: 'yexca';
}
div::after {
content: 'blog';
}
</style>
<div>'</div>
<!-- 內容為 yexca'blog -->
|