一、選擇器進階

復雜選擇器組合詳解

后代選擇器

后代選擇器使用空格分隔兩個選擇器，例如div p，表示選擇div元素內所有的p元素。這種選擇方式會匹配所有層級的后代元素，包括子元素、孫元素等任意深度的嵌套元素。

應用示例：

/* 選中article元素內所有p元素 */
article p {color: #333;line-height: 1.6;
}

子選擇器

子選擇器使用>符號連接，例如div > p，僅選擇div元素的直接子元素p，不會匹配更深層次的p元素。

應用場景：

/* 只選擇導航菜單中的一級菜單項 */
nav > ul > li {padding: 10px 15px;
}

相鄰兄弟選擇器

相鄰兄弟選擇器通過+連接，例如h2 + p，會選中緊接在h2元素后面的第一個p元素，且兩者必須具有相同的父元素。

典型用例：

/* 設置標題后第一個段落的特殊樣式 */
h2 + p {font-size: 1.1em;margin-top: 0;
}

通用兄弟選擇器

通用兄弟選擇器使用~符號，例如h2 ~ p，選擇h2元素后面所有同屬一個父元素的p元素。

實際應用：

/* 設置標題后所有段落的縮進 */
h3 ~ p {text-indent: 2em;
}

權重與性能考慮

• 復雜選擇器會提高選擇器的權重值，例如#content div p比單獨的p選擇器權重更高
• 過度嵌套的選擇器會影響瀏覽器渲染性能，建議不超過3層嵌套
• 在大型項目中，應保持選擇器的簡潔性，便于后期維護

偽類與偽元素詳解

常用偽類及其應用

1. 狀態偽類：

   • :hover - 鼠標懸停時的狀態

   a:hover {color: #f60;text-decoration: underline;
   }
   

   • :active - 元素被激活時的狀態
   • :focus - 元素獲得焦點時的狀態

2. 結構偽類：

   • :nth-child(n) - 選擇父元素中第n個子元素

   /* 表格斑馬紋效果 */
   tr:nth-child(odd) {background-color: #f9f9f9;
   }
   

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

3. 表單偽類：

   • :checked - 選中狀態的單選/復選框
   • :disabled - 禁用的表單元素
   • :valid - 輸入值有效的表單元素

偽元素的使用技巧

1. ::before和::after：

   • 必須配合content屬性使用，即使內容為空

   /* 添加引號裝飾 */
   blockquote::before {content: open-quote;font-size: 2em;color: #ccc;
   }
   

2. 樣式控制：

   • 偽元素默認為行內元素，設置寬高需要改變顯示方式：

   .tooltip::after {content: attr(data-tooltip);display: inline-block;width: 120px;height: 30px;
   }
   

3. 其他偽元素：

   • ::first-letter - 選擇元素的首字母
   • ::first-line - 選擇元素的第一行
   • ::selection - 選擇用戶選中的文本部分

最佳實踐建議

1. 偽類應按邏輯順序聲明：:link → :visited → :hover → :active
2. 偽元素在CSS3中應使用雙冒號語法(::)，雖然單冒號(:)也兼容
3. 避免使用偽元素插入重要的內容，因為屏幕閱讀器可能無法識別
4. 合理使用偽類選擇器替代JavaScript實現交互效果，如:hover替代鼠標事件

二、布局進階

Flexbox 布局（彈性盒布局）

Flexbox 是現代 CSS 中的一維布局模型，專門為解決傳統布局方式（如浮動、定位等）在響應式設計中的不足而設計。它通過靈活的容器-項目關系，使元素能夠自動適應不同屏幕尺寸。

容器屬性詳解

1. display: flex - 將元素設為 Flex 容器，其直接子元素自動成為 Flex 項目

   • 示例：.container { display: flex; }

2. flex-direction - 決定主軸方向

   • row（默認）：水平從左到右
   • row-reverse：水平從右到左
   • column：垂直從上到下
   • column-reverse：垂直從下到上
   • 實際應用：導航欄用 row，移動端菜單用 column

3. justify-content - 主軸對齊方式

   • flex-start（默認）：左對齊
   • flex-end：右對齊
   • center：居中對齊
   • space-between：兩端對齊，項目間等距
   • space-around：每個項目兩側等距

4. align-items - 交叉軸對齊方式

   • stretch（默認）：拉伸填滿容器高度
   • flex-start：頂部對齊
   • flex-end：底部對齊
   • center：垂直居中
   • baseline：項目基線對齊

項目屬性詳解

1. flex-grow - 放大比例

   • 默認 0（不放大）
   • 示例：設置 .item { flex-grow: 1 } 讓項目平分剩余空間
   • 多個項目設置不同值時，按比例分配空間

2. flex-shrink - 縮小比例

   • 默認 1（空間不足時縮小）
   • 設為 0 可防止項目縮小（如固定寬度元素）

3. flex-basis - 初始大小

   • 可設置為長度（如 200px）或百分比
   • 默認 auto（基于內容寬度）

實用技巧與注意事項

1. 簡寫屬性：

   • flex: <grow> <shrink> <basis>
   • 常用：flex: 1 等同于 flex: 1 1 0%

2. 舊版瀏覽器支持：

   • 需要添加廠商前綴：-webkit-flex, -ms-flex 等
   • 可使用 Autoprefixer 工具自動處理

3. 失效屬性：

   • 在 Flexbox 布局中，子元素的 float, clear 和 vertical-align 屬性將失效

4. 典型應用場景：

   • 導航菜單
   • 卡片布局
   • 表單元素排列
   • 媒體對象（圖片+文字）

Grid 布局（網格布局）

Grid 布局是 CSS 中最強大的二維布局系統，可以同時控制行和列的排布，適合構建復雜的網頁布局。

容器屬性詳解

1. display: grid - 創建 Grid 容器

   • 示例：.container { display: grid; }

2. grid-template-columns/grid-template-rows - 定義列/行

   • 固定值：grid-template-columns: 100px 200px 300px
   • 百分比：grid-template-columns: 30% 70%
   • 彈性單位 fr：grid-template-columns: 1fr 2fr（1:2比例）
   • repeat()函數：grid-template-columns: repeat(3, 1fr)（三等分）
   • minmax()：grid-template-columns: minmax(100px, 1fr)

3. grid-gap（現為 gap） - 網格間距

   • 簡寫：gap: <row-gap> <column-gap>
   • 示例：gap: 20px 10px（行距20px，列距10px）

項目屬性詳解

1. grid-column/grid-row - 項目位置

   • 簡寫：grid-column: <start> / <end>
   • 示例：
     • grid-column: 1 / 3：跨越第1-2列
     • grid-row: span 2：跨越2行

2. grid-area - 綜合定位

   • 可結合 grid-template-areas 使用
   • 示例：grid-area: 1 / 1 / 3 / 3（行起始/列起始/行結束/列結束）

高級特性

1. 命名網格線：

   .container {grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
   }
   .item {grid-column: content-start / content-end;
   }
   

2. 網格模板區域：

   .container {grid-template-areas:"header header header""sidebar content content""footer footer footer";
   }
   .header { grid-area: header; }
   .sidebar { grid-area: sidebar; }
   

注意事項

1. 瀏覽器兼容性：

   • IE10/11 支持舊版 Grid 語法
   • 現代瀏覽器支持良好
   • 可使用 @supports 進行特性檢測

2. 學習曲線：

   • 比 Flexbox 更復雜，建議先掌握基本概念
   • 推薦使用瀏覽器開發者工具調試網格布局

3. 典型應用場景：

   • 整體頁面布局
   • 圖片畫廊
   • 儀表盤
   • 復雜表單布局
   • 雜志式排版

布局選擇建議

1. 選擇 Flexbox 當：

   • 需要一維布局（行或列）
   • 內容大小不確定，需要彈性調整
   • 需要簡單的對齊控制

2. 選擇 Grid 當：

   • 需要二維布局（行列同時控制）
   • 需要精確控制項目位置
   • 構建復雜整體布局

3. 組合使用：

   • 可以在 Grid 項目中使用 Flexbox
   • 例如：網格布局整體結構，內部元素用 Flexbox 排列

三、動畫與過渡

過渡（Transition）

過渡（Transition）是CSS3中一項強大的功能，它允許元素的樣式在一定時間內平滑地從一個狀態變化到另一個狀態，而不是立即改變。這種平滑的變化效果能夠顯著提升用戶體驗，使界面交互更加自然流暢。

完整語法

transition: property duration timing-function delay;

參數詳解

1. property（必需）：

   • 指定要過渡的CSS屬性名稱
   • 可以是單個屬性（如width），多個屬性（用逗號分隔），或all表示所有可過渡屬性
   • 常見可過渡屬性：color, background-color, opacity, transform, width, height等

2. duration（必需）：

   • 設置過渡效果的持續時間
   • 單位：秒（s）或毫秒（ms）
   • 例如：0.5s、300ms
   • 必須設為正值，0表示無過渡效果

3. timing-function（可選）：

   • 定義過渡速度曲線，默認值為ease
   • 常用值：
     • linear：勻速變化
     • ease：慢快慢（默認）
     • ease-in：慢開始
     • ease-out：慢結束
     • ease-in-out：慢開始和慢結束
     • cubic-bezier(n,n,n,n)：自定義貝塞爾曲線

4. delay（可選）：

   • 設置過渡效果開始前的延遲時間
   • 單位同duration
   • 默認值為0，表示立即開始
   • 可以為負值，表示立即開始但跳過部分動畫

應用示例

/* 單個屬性過渡 */
.button {background-color: blue;transition: background-color 0.3s ease;
}.button:hover {background-color: red;
}/* 多個屬性過渡 */
.card {opacity: 1;height: 200px;transition: opacity 0.5s ease-out, height 0.8s cubic-bezier(0.1, 0.7, 1.0, 0.1);
}.card.hidden {opacity: 0;height: 0;
}/* 所有屬性過渡 */
.element {transition: all 0.4s ease-in 0.1s;
}

實際應用場景

1. 按鈕懸停效果
2. 下拉菜單的展開/收起
3. 模態框的淡入淡出
4. 卡片翻轉效果
5. 表單輸入的焦點狀態變化

注意事項

1. 不可過渡屬性：

   • 不是所有CSS屬性都能過渡，如display（none/block）、font-family等
   • visibility屬性可以過渡，但效果是離散的

2. 性能考慮：

   • 優先使用transform和opacity進行動畫，它們對性能影響最小
   • 避免過渡height, width等會導致重排（reflow）的屬性
   • 過渡時間一般控制在0.2-0.5秒之間，過長會影響用戶體驗

3. 瀏覽器兼容性：

   • 現代瀏覽器都支持CSS過渡
   • 對于舊版瀏覽器，可能需要添加瀏覽器前綴（如-webkit-transition）

動畫（Animation）

CSS動畫比過渡更加靈活強大，它允許開發者定義多個關鍵幀和復雜的動畫序列，實現更豐富的動態效果。

關鍵幀定義

@keyframes animationName {0% { /* 初始狀態樣式 */ }50% { /* 中間狀態樣式 */ }100% { /* 結束狀態樣式 */ }
}

完整語法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

參數詳解

1. name（必需）：

   • 對應@keyframes定義的動畫名稱

2. duration（必需）：

   • 動畫完成一個周期的時間
   • 單位：秒（s）或毫秒（ms）

3. timing-function（可選）：

   • 定義動畫的速度曲線
   • 取值與transition相同，還多了steps(n)等特殊函數

4. delay（可選）：

   • 動畫開始前的延遲時間

5. iteration-count（可選）：

   • 動畫播放次數
   • 數字（如2）或infinite（無限循環）
   • 默認1

6. direction（可選）：

   • 定義動畫是否反向播放
   • normal（默認）、reverse、alternate（交替）、alternate-reverse

7. fill-mode（可選）：

   • 規定動畫執行前后如何應用樣式
   • none（默認）、forwards（保留結束狀態）、backwards（應用起始狀態）、both

8. play-state（可選）：

   • 控制動畫的播放狀態
   • running（默認）或paused

應用示例

/* 定義關鍵幀 */
@keyframes bounce {0%, 100% {transform: translateY(0);}50% {transform: translateY(-30px);}
}/* 應用動畫 */
.ball {animation: bounce 1s ease-in-out infinite;
}/* 復雜動畫示例 */
@keyframes complexAnimation {0% {opacity: 0;transform: scale(0.5) rotate(0deg);}30% {opacity: 1;transform: scale(1.2);}70% {transform: rotate(180deg);}100% {opacity: 1;transform: scale(1) rotate(360deg);}
}.element {animation: complexAnimation 2s ease 0s 1 normal forwards;
}

實際應用場景

1. 加載動畫（旋轉、跳動等）
2. 入場/出場動畫
3. 無限循環的背景動畫
4. 復雜的交互反饋動畫
5. 頁面過渡效果

注意事項

1. 性能優化：

   • 優先使用transform和opacity進行動畫
   • 避免動畫過多或過于復雜
   • 使用will-change屬性提前告知瀏覽器哪些屬性會變化

2. 用戶體驗：

   • 重要內容不應只依賴動畫呈現
   • 提供關閉動畫的選項（通過prefers-reduced-motion媒體查詢）

   @media (prefers-reduced-motion: reduce) {* {animation-duration: 0.01ms !important;transition-duration: 0.01ms !important;}
   }
   

3. 瀏覽器兼容性：

   • 現代瀏覽器都支持CSS動畫
   • 關鍵幀和動畫屬性可能需要瀏覽器前綴
   • 復雜動畫可能需要JavaScript輔助實現

四、其他進階知識點

變量（Custom Properties）

CSS 變量（也稱為自定義屬性）是現代CSS中非常強大的功能，它允許開發者在樣式表中定義可重用的值，顯著提高代碼的維護性和靈活性。

詳細使用方法

定義變量：

:root {--main-color: #ff0000;--secondary-color: #00ff00;--base-font-size: 16px;--spacing-unit: 8px;
}

在:root偽類中定義的變量具有全局作用域，可以在文檔的任何地方使用。:root實際上等同于html選擇器，但具有更高的優先級。

使用變量：

.header {color: var(--main-color);font-size: var(--base-font-size);padding: calc(var(--spacing-unit) * 2);
}.button {background-color: var(--main-color);border-color: var(--secondary-color);
}

變量特性

1. 作用域：變量可以在不同的選擇器中重新定義，形成局部作用域

   .dark-theme {--main-color: #333333;--secondary-color: #666666;
   }
   

2. 繼承性：變量遵循CSS的繼承規則

   .parent {--custom-padding: 20px;
   }
   .child {/* 會繼承父元素的--custom-padding值 */padding: var(--custom-padding);
   }
   

3. 大小寫敏感：--mainColor和--maincolor是兩個不同的變量

4. 默認值：可以為var()函數提供回退值

   .element {color: var(--undefined-var, black);
   }
   

實際應用場景

1. 主題切換：通過修改變量值實現整個網站的主題切換
2. 響應式設計：在不同斷點修改變量值
3. 統一設計系統：保持間距、顏色等設計元素的統一性
4. 動態計算：結合calc()函數實現動態計算

混合模式（Mix Blend Mode）

混合模式是CSS中用于控制元素與其背景或其他元素如何混合的視覺特性，類似于Photoshop中的圖層混合模式。

常用混合模式值

1. normal：默認值，不應用混合
2. multiply：正片疊底，產生較暗的顏色
3. screen：濾色，產生較亮的顏色
4. overlay：疊加，結合multiply和screen
5. darken：變暗
6. lighten：變亮
7. color-dodge：顏色減淡
8. color-burn：顏色加深
9. difference：差值
10. exclusion：排除
11. hue：色相
12. saturation：飽和度
13. color：顏色
14. luminosity：亮度

使用示例

.image-overlay {mix-blend-mode: multiply;background-color: #ff0000;
}.text-over-image {mix-blend-mode: difference;color: white;
}

實際應用場景

1. 圖像效果：為圖片添加色彩疊加效果
2. 文字可讀性：確保文字在任何背景上都清晰可見
3. 創意設計：創建獨特的視覺組合效果
4. UI元素：制作特殊的按鈕或交互效果

注意事項

1. 瀏覽器兼容性：雖然現代瀏覽器都支持，但某些舊版本可能需要前綴
2. 性能考慮：復雜的混合模式可能會影響渲染性能
3. 測試需求：不同顏色組合下效果差異很大，需要充分測試
4. 背景依賴：效果取決于底層元素的顏色和內容
5. 與background-blend-mode的區別：后者用于元素自身背景層的混合

最佳實踐

1. 始終在多種背景顏色下測試效果
2. 考慮提供備用樣式以防混合模式不被支持
3. 避免在大量元素上使用復雜混合模式
4. 結合CSS變量動態控制混合模式
5. 注意與透明度(opacity)的交互效果