24、web前端開發之CSS3（一）

CSS3詳細講義

CSS3簡介
CSS3核心特性
選擇器
盒模型
背景與邊框
文本樣式
顏色與透明度
過渡與動畫
變換
彈性盒布局
網格布局
媒體查詢
多列布局
字體與排版
裝飾與效果
性能優化
新特性與兼容性
CSS3實踐示例
總結

一、CSS3簡介

CSS3（Cascading Style Sheets, Level 3）是CSS技術的最新版本，旨在通過引入新的功能和改進，提升Web開發的效率和網頁的視覺效果。CSS3是模塊化的，每個模塊獨立開發和發布，涵蓋了選擇器、盒模型、背景、邊框、文本、變換、過渡、動畫、多列布局、網格布局等多個方面。通過使用CSS3，開發者可以創建更加豐富、靈活和交互式的Web應用。

二、CSS3的核心特性

CSS3（Cascading Style Sheets, Level 3）是CSS技術的最新版本，相較于前一版本CSS2，CSS3引入了許多新特性和改進，使得Web設計更加靈活、強大。以下是CSS3的一些核心特性：

選擇器（Selectors）
- 類型選擇器：根據元素類型（如div, p）選擇元素。
- 類選擇器：根據元素的class屬性選擇元素，常用于樣式重用。
- ID選擇器：根據元素的唯一id屬性選擇元素。
- 屬性選擇器：根據元素的屬性及其值選擇元素，支持子字符串匹配、包含值等高級匹配方式。
- 偽類選擇器：用于選擇元素的特定狀態（如:hover, :active，以及結構偽類如:nth-child）。
- 偽元素選擇器：用于選擇元素的一部分（如:first-letter, ::after）。
- 組合選擇器：允許多個選擇器結合，精確選擇目標元素。
盒模型（Box Model）
- 邊框（Borders）：增強了邊框的控制，例如圓角邊框（border-radius）、邊框圖片（border-image）等。
- 內邊距與外邊距：更靈活地控制元素的空白區域。
- 盒子陰影（Box-shadow）：為元素添加陰影效果，增強視覺層次感。
背景與邊框（Backgrounds and Borders）
- 多背景（Multiple Backgrounds）：允許在一個元素上設置多個背景圖像，通過位置和重復屬性控制其顯示。
- 邊框圖片（Border Images）：使用圖片作為邊框，提供更加豐富的視覺效果。
- 圓角邊框（Rounded Corners）：通過border-radius屬性輕松實現圓角效果。
文本樣式（Text Styling）
- 字體陰影（Text Shadow）：為文本添加陰影，提升文字的可讀性和美觀度。
- 文本對齊（Text Alignment）：提供更多的對齊方式，如text-align-last控制末行文本的對齊。
- 字符間距（Letter Spacing）：調整字母之間的間距，優化文本排版。
- 文字溢出（Text Overflow）：控制溢出文本的顯示方式，例如text-overflow: ellipsis將溢出部分替換為省略號。
顏色與透明度（Colors and Transparency）
- 新顏色模式：支持HSL（Hue, Saturation, Lightness）和HSLA（包含透明度的HSL）以及RGBA（包含透明度的RGB）顏色模式，使得顏色的定義更加直觀和靈活。
- 透明度控制：通過Alpha通道（opacity，color: rgba(r, g, b, a)）實現元素的透明和半透明效果。
過渡與動畫（Transitions and Animations）
- 過渡（Transitions）：允許在元素的狀態變化（如:hover）時，平滑地過渡到新的樣式，提升用戶體驗。
- 關鍵幀動畫（Keyframes Animations）：通過定義關鍵幀，創建復雜的動畫效果，無需依賴JavaScript。
變換（Transforms）
- 2D變換：包括平移（translate）、旋轉（rotate）、縮放（scale）、傾斜（skew）等操作，改變元素在二維空間中的顯示。
- 3D變換：支持三維變換，如transform-style: preserve-3d，用于創建立體的視覺效果。
彈性盒布局（Flexbox）
- Flex容器：通過display: flex定義彈性容器，子元素（Flex項目）在其中可以靈活排列，適應不同的屏幕尺寸和空間。
- 軸對齊：支持主軸（justify-content）和交叉軸（align-items）對齊方式，靈活控制子元素的布局。
- Flex項目的屬性：如flex-grow, flex-shrink, flex-basis等，用于控制子元素的拉伸、收縮和初始尺寸。
網格布局（Grid）
- 定義網格：通過display: grid創建網格容器，使用grid-template-columns和grid-template-rows定義列和行。
- 網格單位：引入了fr單位（fractional unit），表示網格軌道的比例關系。
- 子元素的定位：使用grid-column和grid-row屬性，將子元素放置在網格的特定位置。
- 自動布局：支持auto-fill和auto-fit屬性，根據容器尺寸自動調整網格軌道的數量和大小。
媒體查詢（Media Queries）
- 響應式設計：通過媒體查詢，可以針對不同設備特性（如屏幕尺寸、設備類型、方向等）應用不同的樣式，實現真正的響應式設計。
- 條件應用樣式：使用@media規則，根據滿足特定條件時應用相應的CSS樣式，從而優化在不同設備上的顯示效果。
多列布局（Multi-column Layout）
- 多列內容：通過column-count屬性，將內容自動分成多列，類似報紙或雜志的布局。
- 列的寬度和間隔：使用column-width和column-gap控制列的寬度和列與列之間的間隔。
- 列規則：column-rule屬性用于設置列之間的分隔線，提升內容的可讀性。
字體與排版（Typography）
- 自定義字體：通過@font-face規則，允許使用非標準字體，增強視覺效果。
- 字體屬性：font-feature-settings屬性可以訪問字體的高級功能，如連字和配字。
- 垂直文本：writing-mode屬性支持垂直方向的文本排版，適應不同語言的書寫習慣。
裝飾與效果（Decorations and Effects）
- 盒子陰影（Box-shadow）：為元素添加陰影，提升層次感。
- 浮影（Text-shadow）：為文本添加陰影，增強文字的可讀性。
- 模糊效果（Filter）：通過filter屬性實現模糊、灰度、反色等效果。
- 剪裁（Clip-path）：定義元素的顯示區域，支持復雜的剪裁路徑，實現創意設計。
性能優化（Performance Optimization）
- 優化動畫和過渡：合理使用CSS動畫和過渡，避免不必要的性能消耗。
- 減少重繪和回流：通過優化選擇器和布局，減少瀏覽器的重繪和回流次數，提升渲染速度。
- 硬件加速：利用CSS3的3D變換和動畫，觸發硬件加速，提升動畫的流暢度。
新特性與兼容性（New Features and Compatibility）
- 瀏覽器支持：不同瀏覽器對CSS3特性的支持情況不一，需了解各特性的兼容性。
- 廠商前綴（Vendor Prefixes）：在某些特性尚未標準化時，通過添加廠商前綴（如-webkit-, -moz-）確保在不同瀏覽器中的兼容性。
- Polyfills：使用JavaScript或CSS庫，彌補舊瀏覽器對新特性的支持不足，確保功能的一致性。
實踐應用（Practice Applications）
- 響應式網頁設計：利用媒體查詢和靈活的布局，創建適應不同設備的網頁。
- 交互設計：通過CSS3的過渡和動畫，提升用戶界面的交互體驗。
- 視覺設計：利用CSS3的裝飾效果和變換，創建更加豐富和吸引人的視覺效果。
- 高效開發：通過預處理器（如Sass, LESS）和構建工具，提升開發效率和代碼質量。

三、CSS3詳細講解

CSS3選擇器是Cascading Style Sheets（CSS）中用于選擇和應用樣式到HTML文檔中特定元素的工具。它們通過各種方式描述和匹配文檔中的元素，以便為目標元素應用所需的樣式。選擇器可以是簡單的類型選擇器，也可以是復雜的組合選擇器，具體取決于我們需要控制的精度和復雜度。

1、選擇器

1.1. 類型選擇器

類型選擇器是基于HTML標簽名的選擇器。它們會選擇文檔中所有匹配該標簽名的元素。

示例：

p {  margin: 10px 0;  
}

這個選擇器會將所有段落（

）元素的上下外邊距設置為10px。

1.2. 類選擇器

類選擇器允許我們根據元素的class屬性來選擇特定元素。它們以點號開頭。

示例：

<p class="important">這段文字很重要。</p>

.important {  color: red;  font-weight: bold;  
}

在這個示例中，所有具有class屬性為"important"的元素會被設置為紅色且加粗。

1.3. ID選擇器

ID選擇器根據元素的id屬性來選擇特定元素。每個id在一個HTML文檔中應是唯一的。ID選擇器以哈希號開頭。

示例：

<p id="welcome">歡迎來到我的網頁。</p>

#welcome {  color: blue;  font-size: 1.5em;  
}

這個選擇器會將id為"welcome"的段落元素的文本顏色設置為藍色，字體大小為1.5em。

1.4. 屬性選擇器

屬性選擇器可以選擇具有特定屬性的元素，或者具有特定屬性值的元素。它們在CSS2中已存在，但在CSS3中得到了增強。

示例：

<input type="text" name="username" required>

input[type="text"] {  border: 1px solid #ccc;  padding: 5px;  
}

這會將所有type屬性為"text"的元素的邊框設置為1px的灰色實線，并添加5px的內邊距。

高級屬性選擇器：

CSS3還引入了更復雜的屬性選擇器，可以進行子字符串匹配和區分大小寫的選擇。

[attribute^="value"]：選擇屬性值以"value"開頭的元素。
[attribute$="value"]：選擇屬性值以"value"結尾的元素。
[attribute*="value"]：選擇屬性值包含"value"的元素。
[attribute~="value"]：選擇屬性值包含以空格分隔的"value"的元素。
[attribute|="value"]：選擇屬性值為"value"或以"value-"為后綴的元素。
[attribute="value" i]：以不區分大小寫的方式匹配屬性值。

示例：

a[hreflang|="zh"] {  color: red;  
}

這會選擇所有hreflang屬性值為“zh”或以“zh”為后綴的鏈接元素，并將其顏色設置為紅色。

1.5. 偽類選擇器

偽類選擇器用于選擇處于特定狀態或位置的元素。它們可以模擬實時的狀態變化，或是選擇特定位置的元素。

常見的基本偽類：

:link：選擇未被訪問過的鏈接。
:visited：選擇已被訪問過的鏈接。
:hover：選擇被鼠標懸停的元素。
:active：選擇被激活的元素（如被點擊的鏈接）。
:focus：選擇獲得焦點的元素。

示例：

a:link {  color: blue;  text-decoration: none;  
}  a:visited {  color: #999;  
}  a:hover {  color: red;  text-decoration: underline;  
}  a:active {  color: green;  
}

這個示例展示了鏈接在不同狀態下的不同樣式。

CSS3新增的偽類：

:root：選擇文檔的根元素。
:nth-child(n)：選擇父元素的第n個子元素。
:nth-of-type(n)：選擇父元素的第n個某種類型的子元素。
:last-child：選擇父元素的最后一個子元素。
:only-child：選擇父元素的唯一一個子元素。
:checked：選擇被選中的表單元素（如單選按鈕、復選框等）。
:disabled：選擇禁用的表單元素。
:enabled：選擇可用的表單元素。
:required：選擇必填的表單元素。
:valid：選擇合法的表單元素。
:invalid：選擇不合法的表單元素。
:in-range：選擇值在特定范圍內的表單元素。
:out-of-range：選擇值不在特定范圍內的表單元素。
:read-only：選擇只讀的表單元素。
:read-write：選擇可讀寫的表單元素。
:placeholder-shown：選擇顯示占位符的表單元素。
:autofill：選擇自動填充的表單元素。
:optional：選擇可選的表單元素。
:target：選擇當前目標元素（用于頁面片段識別）。

示例：

<input type="text" required>

:required {  border: 1px solid #ff0000;  
}

這會將所有必填的文本輸入框設置為紅色邊框。

1.6. 偽元素選擇器

偽元素選擇器用于選擇元素的一部分內容，或在元素中插入額外的內容。

常見的基本偽元素：

::first-letter：選擇塊級元素的第一個字母。
::first-line：選擇塊級元素的第一行文本。
::before和::after：在元素內容的開始或結束處插入內容。

示例：

<p class="title">這是一個示例段落。</p>

.title::first-letter {  font-size: 2em;  font-weight: bold;  color: red;  
}

這會將段落的第一個字母設置為2em大小，紅色且加粗。

在偽元素中使用content屬性插入內容：

p::before {  content: "開始:";  color: #666;  padding-right: 10px;  
}

這會在每個段落元素的最前面添加“開始：”這幾個字，并設置其顏色為灰色，右側添加10px的內邊距。

1.7. 組合選擇器

組合選擇器允許同時應用多個選擇器條件，以更精確地選擇目標元素。

基本組合方式：

后代選擇器：使用空格隔開的選擇器，選擇所有子代元素。
子代選擇器：使用>符號，選擇直接子代元素。
同胞選擇器：
- 相鄰兄弟選擇器：使用+符號，選擇緊接在某個元素之后的元素。
- 通用兄弟選擇器：使用~符號，選擇所有位于同一父元素下的元素。
多項選擇器：使用逗號，分隔多個選擇器，選擇多個不同的元素。
屬性和類組合：可以將屬性選擇器與類選擇器或其他選擇器結合使用。

示例：

<!DOCTYPE html>  
<html>  
<head>  <style>  /* 后代選擇器 */  .outer div {  padding: 10px;  border: 1px solid #ccc;  }  /* 子代選擇器 */  .outer > p {  margin: 5px 0;  }  /* 相鄰兄弟選擇器 */  h2 + p {  color: red;  font-weight: bold;  }  /* 通用兄弟選擇器 */  h2 ~ p {  line-height: 1.8;  }  /* 多項選擇器 */  h1, h2, h3 {  color: #333;  }  /* 屬性和類組合 */  input[type="text"].username {  width: 200px;  padding: 8px;  }  </style>  
</head>  
<body>  <div class="outer">  <div>Inner div 1</div>  <div>Inner div 2</div>  <p>段落1</p>  <p>段落2</p>  </div>  <h2>標題</h2>  <p>第一段內容。</p>  <p>第二段內容。</p>  <h1>主標題</h1>  <h2>副標題</h2>  <h3>子標題</h3>  <input type="text" class="username" placeholder="請輸入用戶名">  
</body>  
</html>

在這個示例中，展示了各種組合選擇器的應用。例如，后代選擇器.outer div選擇外層div中的所有div元素，并為其添加內邊距和邊框；相鄰兄弟選擇器h2 + p選擇緊接在h2元素之后的p元素，并將其顏色設置為紅色且加粗；多項選擇器h1, h2, h3將所有標題元素的顏色統一為灰色。

1.8. 否定選擇器

:not()選擇器用于排除不符合條件的元素。

示例：

<p class="special">這是一個特殊的段落。</p>  
<p>這是一個普通的段落。</p>

p:not(.special) {  color: #666;  
}

這會將所有不具有class="special"的段落元素的顏色設置為灰色。

1.9. 空選擇器

:empty選擇器用于選擇沒有子元素的元素。

示例：

<div class="container"></div>

.container:empty {  display: none;  
}

這會隱藏所有沒有子元素的具有class="container"的div元素。

1.10. 邏輯組合選擇器

CSS3引入了邏輯組合選擇器，允許我們通過邏輯操作組合多個選擇器條件。

主要的邏輯組合選擇器包括：

:is()：匹配任何給定的選擇器列表。
:where()：類似于is()，但權重更低。
:has()：匹配包含特定子元素的元素。

示例：

<div class="media">  <img src="image.jpg" alt="示例圖像">  <p>這是一段描述。</p>  
</div>

:has(img) {  background-color: #f0f0f0;  padding: 20px;  
}

這會將所有包含元素的元素設置為淺灰色背景，并添加20px的內邊距。

1.11. 高級偽類選擇器

1. nth-child(n) 和 nth-of-type(n)

:nth-child(n)：選擇父元素的第n個子元素，n可以是數字、奇數（odd）、偶數（even）。
:nth-of-type(n)：選擇父元素的第n個某類型的子元素。

示例：

<ul>  <li>項目1</li>  <li>項目2</li>  <li>項目3</li>  <li>項目4</li>  
</ul>

li:nth-child(2) {  background-color: #f0f0f0;  
}  li:nth-of-type(3) {  font-weight: bold;  
}

這會將列表中的第二個項目設置為淺灰色背景，并將第三個項目設置為加粗。

2. first-child 和 last-child

:first-child：選擇父元素的第一個子元素。
:last-child：選擇父元素的最后一個子元素。

示例：

<ul>  <li>項目1</li>  <li>項目2</li>  <li>項目3</li>  
</ul>

li:first-child {  color: red;  
}  li:last-child {  color: blue;  
}

這會將第一個項目設置為紅色，最后一個項目設置為藍色。

3. only-child

選擇父元素的唯一一個子元素。

示例：

<div class="single">  <p>唯一的段落。</p>  
</div>

.single:only-child {  font-size: 1.5em;  color: green;  
}

這會將唯一的段落元素字體大小設置為1.5em，顏色為綠色。

4. checked

選擇被選中的表單元素（如單選按鈕、復選框等）。

示例：

<input type="checkbox" id="agree">  
<label for="agree">我同意條款。</label>

input:checked + label {  color: red;  font-weight: bold;  
}

這會在復選框被選中時，將其對應的標簽顏色設置為紅色且加粗。

1.12. 表單相關偽類

CSS3引入了一系列表單相關的偽類選擇器，用于增強表單元素的樣式控制。

主要偽類包括：

:enabled：選擇可用的表單元素。
:disabled：選擇禁用的表單元素。
:required：選擇必填的表單元素。
:optional：選擇可選的表單元素。
:valid：選擇合法的表單元素。
:invalid：選擇不合法的表單元素。
:in-range：選擇值在特定范圍內的表單元素。
:out-of-range：選擇值不在特定范圍內的表單元素。
:read-only：選擇只讀的表單元素。
:read-write：選擇可讀寫的表單元素。
:placeholder-shown：選擇顯示占位符的表單元素。
:autofill：選擇自動填充的表單元素。

示例：

<form>  <input type="text" required placeholder="請輸入用戶名">  <input type="email" required placeholder="請輸入郵箱">  <button type="submit">提交</button>  
</form>

:required {  border: 1px solid #ff0000;  
}  :invalid {  border: 1px solid #ff0000;  background-color: #ffe6e6;  
}  input:focus {  outline: none;  border-color: #4CAF50;  box-shadow: 0 0 5px rgba(76,175,80,0.3);  
}

在這個示例中，所有必填的表單輸入框會在輸入無效時顯示紅色邊框，并在獲得焦點時顯示綠色邊框和輕微的盒影。

1.13. 特殊形式的選擇器

1. 目標選擇器 (:target)

:target偽類選擇器用于選擇到達通過片段標識符（即URL中的#部分）表示的目標元素。這種選擇器在單頁面應用（SPA）中非常有用，可以通過改變URL的片段標識符來顯示不同的內容。

示例：

<!DOCTYPE html>  
<html>  
<head>  <style>  :target {  border: 2px solid #4CAF50;  padding: 20px;  }  section {  margin: 20px;  padding: 10px;  }  </style>  
</head>  
<body>  <a href="#home">首頁</a> |   <a href="#about">關于</a> |  <a href="#contact">聯系</a>  <section id="home">  <h2>首頁</h2>  <p>歡迎來到首頁。</p>  </section>  <section id="about">  <h2>關于</h2>  <p>這是關于頁面的內容。</p>  </section>  <section id="contact">  <h2>聯系</h2>  <p>這是聯系頁面的內容。</p>  </section>  
</body>  
</html>

在這個示例中，當用戶點擊導航鏈接時，目標section會被:target選擇器選中，并添加綠色邊框和內邊距，突出顯示當前查看的內容。

2. 自動填充選擇器 (:autofill)

:autofill偽類選擇器用于選擇自動填充的表單元素。現代瀏覽器在用戶選擇自動填充選項時會觸發該偽類。

示例：

<input type="text" id="username" autocomplete="on">

input:autofill {  background-color: yellow;  
}

這會在瀏覽器自動填充輸入框時，將其背景顏色設置為黃色。

3. 只讀和讀寫選擇器

:read-only：選擇只讀的表單元素。
:read-write：選擇可讀寫的表單元素。

示例：

<input type="text" value="只讀" readonly>  
<input type="text" value="可讀寫">

:read-only {  background-color: #f0f0f0;  
}  :read-write {  background-color: #ffffff;  
}

這會將只讀輸入框的背景顏色設置為淺灰色，而可讀寫的輸入框保持白色背景。

1.14. 效率和性能考慮

在使用高級選擇器時，需要考慮其對性能的影響。復雜的選擇器可能會降低瀏覽器的渲染速度，尤其是在處理大型或復雜的文檔時。因此，合理選擇選擇器，避免使用過于復雜的組合選擇器，可以提高頁面的性能。

優化技巧：

避免過于復雜的選擇器：盡量簡化選擇器，減少瀏覽器解析的工作量。
使用高效的選擇器：選擇器的效率從高到低通常為：ID > 類 > 標簽名 > 屬性選擇器 > 偽類選擇器 > 組合選擇器。
減少深層次的后代選擇器：過多的嵌套選擇器會增加計算復雜度。
利用CSS預處理器：使用Sass或LESS等預處理器，可以通過 mixin和變量提高代碼的可維護性，同時減少冗長的選擇器。

1.15. 瀏覽器兼容性

CSS3的新特性在不同瀏覽器中的支持情況可能不一致，尤其是在舊版本的瀏覽器中。因此，了解不同選擇器的瀏覽器兼容性非常重要。在實際項目中，為了確保廣泛的兼容性，可以采用以下策略：

使用Polyfills：通過引入Polyfills庫，為舊瀏覽器提供對新特性的支持。
添加廠商前綴：在必要時為部分屬性添加廠商前綴（如-webkit-, -moz-, -ms-, -o-），以確保新特性在各大瀏覽器中的正常顯示。
漸進增強：首先為所有瀏覽器提供基本的功能和樣式，然后逐步添加高級的樣式和交互，確保在舊瀏覽器中依然保持可用性。

示例：

.border-radius {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  -o-border-radius: 10px;  border-radius: 10px;  
}

在這個示例中，添加了各大廠商的前綴，確保圓角邊框在不同瀏覽器中的兼容性。

1.16. 最佳實踐

在實際項目中，合理地使用選擇器可以提高代碼的可維護性和效率。以下是一些最佳實踐：

明確選擇器的范圍：通過合理的類名和結構，確保選擇器只影響目標元素，避免樣式污染。
避免過度使用ID選擇器：ID選擇器的權重高于類選擇器，可能會導致樣式沖突，影響維護性。
使用語義化的類名：類名應具有描述性，反映元素的內容或功能，而不是樣式信息。
利用繼承性：CSS的繼承特性可以簡化代碼，減少重復的樣式定義。
分組聲明：將適用于多個選擇器的樣式分組，減少代碼重復。
利用預處理器的優勢：使用Sass或LESS的嵌套規則，可以更清晰地組織選擇器，提高代碼的可讀性。

1.17. 實踐示例

通過以下幾個示例，可以更好地理解和掌握CSS3選擇器的用法。

示例1：基本選擇器的使用

<!DOCTYPE html>  
<html>  
<head>  <style>  /* 類型選擇器 */  p {  margin: 10px 0;  }  /* 類選擇器 */  .highlight {  color: red;  font-weight: bold;  }  /* ID選擇器 */  #summary {  background-color: #f0f0f0;  padding: 10px;  }  /* 屬性選擇器 */  a[hreflang="zh"] {  color: blue;  }  /* 偽類選擇器 */  a:hover {  text-decoration: none;  }  /* 偽元素選擇器 */  p::first-letter {  font-size: 2em;  }  </style>  
</head>  
<body>  <p class="highlight">這是一個突出的段落。</p>  <p id="summary">這是一個摘要段落。</p>  <a href="https://www.example.com" hreflang="zh">中文鏈接</a>  
</body>  
</html>

示例2：組合選擇器

<!DOCTYPE html>  
<html>  
<head>  <style>  /* 后代選擇器 */  .outer p {  color: #666;  }  /* 子代選擇器 */  .outer > h2 {  font-size: 1.5em;  }  /* 相鄰兄弟選擇器 */  h3 + p {  font-weight: bold;  }  /* 通用兄弟選擇器 */  h2 ~ p {  line-height: 1.8;  }  /* 多項選擇器 */  h1, h2, h3 {  color: #333;  }  /* 屬性和類組合 */  input[type="text"].username {  width: 200px;  padding: 8px;  }  </style>  
</head>  
<body>  <div class="outer">  <h2>子標題</h2>  <p>子標題下的段落。</p>  </div>  <h3>另一個標題</h3>  <p>緊接在h3后的段落。</p>  <input type="text" class="username" placeholder="請輸入用戶名">  
</body>  
</html>

示例3：高級偽類

<!DOCTYPE html>  
<html>  
<head>  <style>  /* :nth-child(n) */  li:nth-child(2) {  background-color: #f0f0f0;  }  /* :first-child 和 :last-child */  li:first-child {  color: red;  }  li:last-child {  color: blue;  }  /* :not() */  p:not(.special) {  color: #666;  }  /* :has() */  div:has(img) {  border: 1px solid #ccc;  padding: 10px;  }  /* 表單相關偽類 */  :required {  border: 1px solid red;  }  input:focus {  outline: none;  border-color: green;  box-shadow: 0 0 5px rgba(0, 128, 0, 0.3);  }  </style>  
</head>  
<body>  <ul>  <li>項目1</li>  <li>項目2</li>  <li>項目3</li>  <li>項目4</li>  </ul>  <p class="special">特殊段落</p>  <p>普通段落</p>  <div>  <img src="image.jpg" alt="示例圖片">  <p>包含圖片的div元素。</p>  </div>  <form>  <input type="text" required placeholder="用戶名">  <input type="email" required placeholder="郵箱">  </form>  
</body>  
</html>

通過這些示例，可以更好地理解和掌握CSS3選擇器的各種特性及其在實際中的應用。

1.18. 總結

CSS3選擇器為Web開發者提供了更加強大和靈活的工具，能夠更精確地控制和美化Web頁面的外觀。從基本的類型選擇器到復雜的組合選擇器，再到高級的偽類和偽元素選擇器，選擇器的種類和功能極大豐富了CSS的表現力。合理地使用這些選擇器，不僅可以提升開發效率，還能提高代碼的可維護性和可讀性。然而，選擇器的復雜程度和瀏覽器兼容性問題也是需要關注的地方。通過實踐和不斷的學習，可以更好地掌握CSS3選擇器的使用，提升自己的前端開發技能。