一、基础选择器（必会）

1️⃣ 通配选择器

*

👉 选择 所有元素

2️⃣ 类型（标签）选择器

div
p
plate

👉 选择所有该标签的元素

3️⃣ ID 选择器（唯一）

#fancy

👉 选择 id="fancy" 的元素
⚠️ 一个页面里 id 应该唯一

4️⃣ class 选择器（最常用）

.cool
.highlight

👉 选择 class="cool" 的元素
👉 一个元素可以有多个 class

并集选择器

同时选中两种不同标签

A, B

二、组合选择器（CSS Diner 高频）

5️⃣ 后代选择器（空格）

plate apple

👉 选择 plate 里面的所有 apple（不管多深）

6️⃣ 子选择器（>）

plate > apple

👉 只选择 plate 的直接子元素 apple

7️⃣ 相邻兄弟选择器（+）

plate + apple

👉 选择 紧跟在 plate 后面的第一个 apple

8️⃣ 通用兄弟选择器（~）

plate ~ apple

👉 选择 plate 后面的所有兄弟 apple

三、属性选择器（很重要）

9️⃣ 存在某属性

[disabled]

👉 有 disabled 属性的元素

🔟 属性等于

[type="text"]

1️⃣1️⃣ 属性包含（子串）

[class*="cool"]

👉 class 里 包含 cool

1️⃣2️⃣ 属性开头

[href^="https"]

1️⃣3️⃣ 属性结尾

[src$=".png"]

四、伪类选择器（CSS Diner 后半程重点）

1️⃣4️⃣ 第一个子元素

:first-child

1️⃣5️⃣ 最后一个子元素

:last-child

1️⃣6️⃣ 第 n 个子元素

:nth-child(2)
:nth-child(odd)
:nth-child(even)

1️⃣7️⃣ 同类型第 n 个

:nth-of-type(2)

1️⃣8️⃣ 只有一个子元素

:only-child

1️⃣9️⃣ 空元素

:empty

五、否定选择器（很有用）

2️⃣0️⃣ 排除某些元素

:not(.cool)
:not(:first-child)

六、状态伪类（真实项目常用）

:hover
:active
:focus
:checked
:disabled

七、组合使用

例 1：有 id 又是某标签

plate#fancy

例 2：有 class 的子元素

plate > apple.small

例 3：排除第一个

plate apple:not(:first-child)

例4：伪类选择器+结构关系

选中盘子中最上面的那个橘子

plate orange:first-child

最后，给大家一个很有意思的练习：CSS Diner