以下是一些常用的 CSS 選擇器：

常用選擇器：

1. 元素選擇器 (Element Selector)：直接選擇 HTML 元素。

   • 例如：p { color: blue; }（選擇所有段落）

2. 類選擇器 (Class Selector)：選擇帶有特定類別的元素，前面加 .。

   • 例如：.container { width: 100%; }

3. ID 選擇器 (ID Selector)：選擇帶有特定 ID 的元素，前面加 #。

   • 例如：#header { background-color: gray; }

4. 後代選擇器 (Descendant Selector)：選擇在某個元素內的元素。

   • 例如：div p { font-size: 16px; }（選擇在 div 內的段落）

5. 子選擇器 (Child Selector)：選擇某元素的直接子元素，使用 >。

   • 例如：ul > li { list-style-type: none; }

6. 屬性選擇器 (Attribute Selector)：選擇帶有特定屬性的元素。

   • 例如：input[type="text"] { border: 1px solid black; }

7. 偽類選擇器 (Pseudo-class Selector)：選擇元素的特定狀態。

   • 例如：a:hover { color: red; }（當鼠標懸停在連結上）

常用屬性：

1. 顏色 (Color)

   • 例如：color: red;（文本顏色）

2. 字體 (Font)

   • font-family: Arial, sans-serif;
   • font-size: 16px;
   • font-weight: bold;

3. 背景 (Background)

   • background-color: #f0f0f0;
   • background-image: url('image.jpg');
   • background-position: center;

4. 邊框 (Border)

   • border: 1px solid black;
   • border-radius: 5px;

5. 間距 (Margin & Padding)

   • margin: 20px;
   • padding: 10px;

6. 顯示 (Display)

   • display: block;
   • display: inline-block;
   • display: none;

7. 佈局 (Positioning)

   • position: relative;
   • position: absolute;
   • top: 10px;
   • left: 20px;

8. 尺寸 (Size)

   • width: 100px;
   • height: 50px;