CSS - 選擇器：風格鮮明網頁的入門關卡
你好啊，未來的網頁設計超新星！我很興奮能成為你探索CSS選擇器世界中的引路人。作為一個教了超過十年計算機科學的人，我可以告訴你，掌握選擇器就像是打開了網頁設計無限可能的寶藏。那麼，我們一起來讓你的網頁閃耀起來吧！
選擇器的類型
在我們開始冒險之前，讓我們快速預覽一下我們將要探索的不同類型的選擇器：
| 選擇器類型 | 範例 | 描述 |
|---|---|---|
| 全局 | * | 選擇所有元素 |
| 元素 | p | 選擇所有 元素 |
| 類別 | .classname | 選擇具有class="classname"的元素 |
| ID | #idname | 選擇具有id="idname"的元素 |
| 屬性 | [attribute] | 選擇具有指定屬性的元素 |
| 組合 | selector1, selector2 | 選擇匹配任一選擇器的所有元素 |
| 模擬類 | :hover | 選擇特定狀態下的元素 |
| 模擬元素 | ::first-line | 選擇元素的一部分 |
| 子孫 | div p | 選擇 元素內部的所有
元素 |
| 子元素 | div > p | 選擇父元素為 的所有
元素 |
| 相邻兄弟 | div + p | 選擇紧接 元素之後的第一个
元素 |
| 一般兄弟 | div ~ p | 選擇與 元素為兄弟的所有
元素 |
現在，讓我們詳細探索這些選擇器！
CSS 全局選擇器
全局選擇器就像是CSS中的瑞士軍刀——它選擇一切！它的表示符號是一個星號（*）。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}這段代碼為所有元素重置外邊距和內邊距，並設置box-sizing屬性。它通常用在樣式表的開頭，以創造一個乾淨的畫布。
CSS 元素選擇器
元素選擇器針對特定的HTML元素。它們簡單但強大。
p {
font-size: 16px;
line-height: 1.5;
}
h1 {
color: #333;
font-family: 'Arial', sans-serif;
}在這裡，我們將所有
元素的字体大小設為16像素，行高設為1.5。我們還將所有
元素的顏色設為深灰色，並將其字体設為Arial。
CSS 類別選擇器
類別選擇器非常通用。它們允許你將樣式應用到具有相同類的多个元素上。
.highlight {
background-color: yellow;
font-weight: bold;
}
.error-message {
color: red;
border: 1px solid red;
padding: 10px;
}在這個範例中，任何具有class="highlight"的元素都會有黃色背景和粗體文本。具有class="error-message"的元素會以紅色顯示，並有紅色邊框和一些內邊距。
CSS ID選擇器
ID選擇器用於樣式化單個唯一的元素。它們前面有一個井號（#）。
#header {
background-color: #f0f0f0;
padding: 20px;
}
#main-content {
max-width: 800px;
margin: 0 auto;
}這段代碼樣式化了具有id="header"的元素和具有id="main-content"的元素。記住，ID在頁面中應該是唯一的！
CSS 屬性選擇器
屬性選擇器根據元素的屬性或屬性值來目標元素。
[type="text"] {
border: 1px solid #ccc;
padding: 5px;
}
[href^="https"] {
color: green;
}
[class*="btn"] {
cursor: pointer;
}在這裡，我們樣式化了所有type="text"的元素、以"https"開頭的鏈接，以及類別名稱中包含"btn"的元素。
CSS 組合選擇器
組合選擇器允許你將相同的樣式應用到多个選擇器上。它們用逗號分隔。
h1, h2, h3 {
font-family: 'Georgia', serif;
color: #333;
}
.error, .warning {
font-weight: bold;
}這段代碼將相同的字体家族和顏色應用到h1、h2和h3元素上，並使.error和.warning類別都為粗體。
CSS 模擬類選擇器
模擬類選擇器針對元素在特定狀態下的樣式。
a:hover {
text-decoration: underline;
}
input:focus {
outline: 2px solid blue;
}
li:nth-child(odd) {
background-color: #f0f0f0;
}這些樣式將在滑鼠悬停時為鏈接添加下劃線，為聚焦的輸入框添加藍色外框，並為列表中的每一個奇數子項添加淺灰色背景。
CSS 模擬元素選擇器
模擬元素選擇器讓你可以樣式化元素的一部分。
p::first-letter {
font-size: 2em;
font-weight: bold;
}
h1::before {
content: "? ";
}
div::selection {
background-color: yellow;
}這段代碼將段落的第一个字母放大並加粗，為h1元素之前添加一個指向手指表情，並將div中選中的文本背景设置为黄色。
CSS 子孫選擇器
子孫選擇器針對另一個元素的子孫元素。
article p {
line-height: 1.6;
}
.container .box {
border: 1px solid #ccc;
}在這裡，我們樣式化了文章中的所有段落，以及類別為"box"的元素，它們位於類別為"container"的元素內部。
CSS 子元素選擇器
子元素選擇器針對元素的直接子元素。
ul > li {
list-style-type: square;
}
div > p {
margin-bottom: 10px;
}這段代碼為無序列表的直接子項設置了方形項目符號，並為div的直接子元素段落添加了底部外邊距。
CSS 相邻兄弟選擇器
相邻兄弟選擇器針對紧接另一元素之後的元素。
h1 + p {
font-size: 1.2em;
font-weight: bold;
}
.button + .button {
margin-left: 10px;
}在這裡，我們將紧接h1元素之後的第一个段落設為較大的字體並加粗，並為紧接其他按鈕之後的按鈕添加了左外邊距。
CSS 一般兄弟選擇器
一般兄弟選擇器針對另一元素的兄弟元素，即使它們不是紧接著的。
h1 ~ p {
color: #666;
}
.highlight ~ li {
font-style: italic;
}這段代碼將所有紧接h1元素之後的段落的顏色改為灰色，並將紧接類別為"highlight"的元素之後的列表項目設為斜體。
CSS 嵌套選擇器
嵌套選擇器讓你可以通過在另一個選擇器內嵌套選擇器來编写更簡潔、易讀的CSS。
.container {
max-width: 1200px;
margin: 0 auto;
.header {
background-color: #f0f0f0;
padding: 20px;
h1 {
color: #333;
}
}
.content {
padding: 20px;
p {
line-height: 1.6;
}
}
}這種嵌套結構清晰地顯示了元素之間的關係，並使CSS更加有組織。
CSS 嵌套選擇器的特點
- 提高可讀性：嵌套反映了你的HTML結構。
- 减少重複：你不需要重複父選擇器。
- 易於維護：對父選擇器的更改將自動應用到嵌套選擇器。
- 范圍限制：樣式自然地限制在其父級上下文中。
記住，雖然嵌套可以非常強大，但不要過度嵌套，這會使你的CSS更難理解和維護。
那麼，我的熱情的網頁設計學徒，這就是CSS選擇器的旋風之旅。有了這些工具，你已經走上了創建美麗風格網頁的正軌。記住，熟能生巧，所以不要害怕嘗試不同的選擇器和組合。快樂編程！
Credits: Image by storyset