[TOC] # 常用選擇器(4種) ``` 1. *通配符 2. E 標簽選擇器/類型選擇器 3. .class 類選擇器 4. #id id選擇器 ``` > id不能以數字開頭，某些解析器會出錯 > id中不能出現空格 > 中間可以出現數字、_或-開頭 > id是唯一的，如果存在多個，CSS依舊有效，但JavaScript只取第一個 ## 案例1：消除所有標簽的默認樣式(eg. p標簽)  ## 案例2：練習使用不同的選擇器  # 組合選擇器(6種) ``` 1. E F 后代選擇器 2. E>F 父子選擇器 3. E+F 相鄰兄弟選擇器 4. E~F 普通兄弟選擇器 5. E,F 或選擇器 6. E.class E#id派生選擇器 ``` ## 案例3：根據要求實現效果 1. 為所有二級選項添加**下劃線** 2. 將所有學院的**專業設置為藍色** 3. 將所有超市的**物品設置為紅色** 4. 將“**其他**”的背景設置為**黃色**  # 屬性選擇器(7種) ``` 1. 存在 2. 存在且值等于 = 3. 存在且值開頭匹配 ^= 4. 存在且值結尾匹配 $= 5. 存在且值空格分割匹配 ~= 6. 存在且值連接符分割匹配 |= 7. 存在且值包含匹配 *= ``` ## 案例4：根據要求實現效果圖 > 1. 安全的鏈接（https）為藍色 > 2. 不安全的鏈接（http）為紅色 > 3. 在新窗口打開的有下劃線  # 鏈接偽類選擇器(4種) ``` 愛恨原則 link/visited/hover/active ``` ## 案例5：顏色滑塊  # 偽元素選擇器(6種) ``` 1. 首字母 ::first-letter 2. 首行 ::first-line 3. 前面追加 ::before 4. 后面追加 ::after 5. 被選中的文字 ::selection 6. 提示文字 ::placeholder（chrome支持） ``` ## 案例6：英語排版 > 1. 每個段落首字母大寫，字體30px，紅色 > 2. 段落的第一行改變顏色  ## 案例7：改變文本提示文字以及選中文字樣式 > 1. 文本框默認提示文字從灰色變為紅色 > 2. 網頁中選中的文本從藍色變為黃色  ``` <style type="text/css"> div::selection{ background-color: yellow; } input::placeholder{ color: red; } </style> ``` ## 案例8：為資源添加圖標和提示  # 狀態偽類選擇器(7種) ``` 1. :focus 獲得焦點 2. :not(selector) 3. :is(selector) 4. :checked 被選中 5. :disabled 不可用 6. :read-only 只讀 7. :empty 標簽內容為空 ``` ## 案例9：為所有空單元格添加“/”  ``` td:empty::after{ content: "/"; } ``` # 結構偽類選擇器(10種) ``` 1. E:first-child 2. E:last-child 3. E:only-child 4. E:nth-child(n) 5. E:nth-last-child(n) 6. E:first-of-type 7. E:last-of-type 8. E:only-of-type 9. E:nth-of-type(n) 10. E:nth-last-of-type(n) ``` > 選中的是E，而非E的子元素 ## 案例10：隔行變色  # 樣式優先級 ``` !important > 行內樣式 > ID > 類 | 偽類 | 屬性選擇 > 標簽 > 通配符 > 繼承 ```