? 一、選擇器（Selectors）

1. 屬性選擇器

• [attr^=value]: 匹配屬性值以特定字符串開頭的元素。
• [attr$=value]: 匹配屬性值以特定字符串結尾的元素。
• [attr*=value]: 匹配屬性值包含特定字符串的元素。

2. 子元素和兄弟元素選擇器

• :nth-child(n): 匹配父元素下的第 n 個子元素。
• :nth-last-child(n): 匹配父元素下的倒數第 n 個子元素。
• :nth-of-type(n): 類似于 nth-child, 但只計算同類型的兄弟元素。
• :first-child,?:last-child: 分別匹配第一個和最后一個子元素。
• +?相鄰兄弟選擇器：選中緊接在另一個元素后的某個元素，并且二者有相同的父元素。
• ~?通用兄弟選擇器：選中某元素之后的所有兄弟元素。

3. 其他偽類選擇器

• :not(selector): 匹配不符合指定條件的所有元素。
• :empty: 匹配沒有子節點的元素。

---

? 二、顏色與透明度

1. RGBA 和 HSLA 顏色模式

• rgba(red, green, blue, alpha)?和?hsla(hue, saturation, lightness, alpha)?支持透明度設置。

2. Opacity 屬性

• opacity: 設置元素的透明度（0 - 1之間的小數值）。

---

? 三、邊框與背景

1. 圓角邊框

• border-radius: 創建圓角效果。

2. 盒陰影

• box-shadow: 添加陰影效果給元素。

3. 背景漸變

• linear-gradient(): 創建線性漸變背景。
• radial-gradient(): 創建徑向漸變背景。

---

? 四、文本效果

1. 文本陰影

• text-shadow: 給文本添加陰影效果。

2. 多列布局

• column-count: 指定將元素分割成多少列。
• column-gap: 定義列之間的間距。
• column-rule: 在列間添加分隔線。

3. 字體加載

• @font-face: 自定義字體加載規則。

---

? 五、變形、過渡及動畫

1. 變形 (Transform)

• transform: 對元素進行旋轉 (rotate)、縮放 (scale)、傾斜 (skew) 或移動 (translate) 等操作。

2. 過渡 (Transition)

• transition: 平滑地改變元素樣式屬性值。
• transition-property: 指定應用過渡效果的 CSS 屬性名稱。
• transition-duration: 規定完成過渡效果需要花費的時間。
• transition-timing-function: 定義速度曲線。
• transition-delay: 延遲多久后開始過渡。

3. 動畫 (Animation)

• @keyframes: 定義動畫的關鍵幀。
• animation: 應用 @keyframes 定義的動畫到選定元素上。

---

? 六、彈性盒子模型 (Flexbox)

主要概念

• Flex Container & Flex Items: 彈性容器和其直接子元素被稱為彈性項目。
• display: flex;?/?inline-flex: 將元素設為彈性容器。
• 主軸 (main axis) 和交叉軸 (cross axis): 默認情況下，主軸是水平方向，交叉軸垂直于主軸。

常見屬性

• flex-direction: 定義主軸方向。
• justify-content: 定義如何沿主軸分布空間。
• align-items: 定義如何沿交叉軸對齊所有項目。
• flex-wrap: 控制是否換行以及如何換行。

---

? 七、網格布局 (Grid Layout)

核心概念

• Grid Container & Grid Items: 網格容器和網格項。
• 使用?display: grid;?來創建網格布局。
• grid-template-columns?和?grid-template-rows: 定義列和行的大小。
• grid-column?和?grid-row: 定位網格項跨越的列和行。