CSS 選擇器
CSS 選擇器是一種用於選擇 HTML 文檔中要樣式化的元素的模式。
它們允許您指定樣式應用於哪些 HTML 元素，從而控制網頁的外觀和布局。
以下是一些常見的 CSS 選擇器以及它們的說明：
介紹
1. 元素選擇器(標籤 tag)：
例如：p，h1，div 通過元素的名稱選擇 HTML 元素。
<p>Hello, world!</p>p {
color: blue;
}2. 類別選擇器：
例如：.my-class 使用 class 屬性的值（例如 my-class）選擇具有特定類別的元素。
<div class="highlight">Hello, world!</div>.highlight {
background-color: yellow;
}3. ID 選擇器：
例如：#my-id 使用 id 屬性的值（例如 my-id）選擇具有特定 ID 的元素。ID 在整個 HTML 文檔中應該是唯一的。
<div id="highlight">Hello, world!</div>#highlight {
background-color: yellow;
}4. 屬性選擇器：
例如：[type="text"] 使用元素的屬性和相應值來選擇元素。
<input type="text" /> <button type="button"></button>input[type="text"] {
border: 1px solid gray;
}
[type="button"] {
border: 1px solid white;
}5. 群組選擇器：
例如：h1, h2, h3 同時選擇多個不同類型的元素，並對它們應用相同的樣式。 後代選擇器：
例如：ul li 選擇某元素的後代元素，以便只選擇特定嵌套關係的元素。
h1, h2, h3 {
font-family: Arial, sans-serif;
}CSS 選擇器的好處：
- 分離內容和樣式：CSS 允許您將網頁的外觀和布局從 HTML 內容中分離出來，使代碼更易於維護和管理。
- 選擇性樣式化：您可以精確地選擇要樣式化的元素，以根據需要應用特定的樣式。這使您能夠創建具有不同外觀的不同部分，而無需更改 HTML 結構。
- 重用性：通過使用類別和 ID 選擇器，您可以創建可重用的樣式，以便在整個網站中使用相同的外觀元件。
優化性能：通過僅樣式化所需的元素，您可以減少網頁的加載時間和內存占用。
範例
<!DOCTYPE html>
<html>
<head>
<style>
/* 元素選擇器 */
p {
font-size: 16px;
color: blue;
}
/* 類別選擇器 */
.highlight {
background-color: yellow;
}
/* ID選擇器 */
#header {
text-align: center;
background-color: #333;
color: #fff;
padding: 10px;
}
/* 後代選擇器 */
ul li {
list-style-type: square;
}
</style>
</head>
<body>
<!-- 使用不同的選擇器樣式化不同元素 -->
<div id="header">Welcome to My Website</div>
<p>這是一段帶有<span class="highlight">突出顯示</span>的文字</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>進階的選擇器
子元素選擇器 (>)：
ul > li（子元素選擇器）：
ul > li 選擇了 <ul> 元素的直接子元素中的所有 <li> 元素。 它只會選擇 <ul> 元素的子級 <li>，不會選擇深度嵌套在其他元素內部的 <li>。 這意味著只有以下結構的 <li> 元素會被選中：<ul> 的直接子元素是 <li>。
<ul>
<li>Item 1</li>
<!-- 選中 -->
<li>Item 2</li>
<!-- 選中 -->
<div>
<li>Item 3</li>
<!-- 不選中，因為它不是 <ul> 的直接子元素 -->
</div>
</ul>ul > li {
...;
}ul li（後代選擇器）：
ul li 選擇了 <ul> 元素下的所有 <li> 元素，不論它們是否是直接子元素。 它選擇了所有深度嵌套在 <ul> 元素內部的 <li> 元素，包括直接子元素和所有後代元素。
這個選擇器選擇指定元素的直接子元素。例如，如果您想選擇某個元素的直接子元素，可以使用>選擇器。
<ul>
<li>Item 1</li> <!-- 選中 -->
<li>Item 2</li> <!-- 選中 -->
<div>
<li>Item 3</li> <!-- 選中，因為它是 <ul> 的後代元素 -->
</div>
</ul>ul li{
...
}相鄰兄弟選擇器 (+)：
這個選擇器選擇某個元素後面的相鄰兄弟元素。例如，如果您想選擇某個元素後面的下一個相鄰元素，可以使用+選擇器。
<h2>Title 1</h2>
<p>...</p> <!-- 選中 -->
<p>...</p> <!-- 不選中 -->h2 + p {
color: green;
}這個示例會選擇<h2>元素後面的第一個相鄰的<p>元素，並將其文字顏色設置為綠色。
通用兄弟選擇器 (~)：
這個選擇器選擇某個元素後面的所有相鄰兄弟元素。不像+只選擇下一個兄弟元素，~選擇所有符合條件的相鄰兄弟元素。
<h2>Title 1</h2>
<p>...</p> <!-- 選中 -->
<p>...</p> <!-- 選中 -->h2 ~ p {
font-style: italic;
}這個示例會選擇所有與<h2>元素後面相鄰的<p>元素，並將它們的字體樣式設置為斜體。
選擇父元素 (:has)：
<div class="container">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
<div class="container">
<span>Span 1</span>
</div>.container:has(p) {
border: 2px solid blue;
}小遊戲
Contributors
lucashsu95