后代选择器通过空格选中所有嵌套的指定元素，如div p；子选择器用>仅选直接子元素，如ul>li；相邻兄弟选择器用+选紧接的同级元素，如h1+p；通用兄弟选择器用~选之后所有同级元素，如h2~p；伪类选择器用:定义特殊状态，如a:hover和li:nth-child(odd)。
如果您在编写CSS样式时需要精确控制页面中的元素，理解选择器之间的关系是实现精准匹配的关键。通过组合不同的选择器，可以更高效地定位目标元素并应用样式。
本文运行环境：MacBook Pro，macOS Sonoma
一、后代选择器
后代选择器用于选取某个元素内部的所有指定后代元素，无论嵌套层级深浅，只要存在父子包含关系即可匹配。
1、使用空格分隔两个选择器，语法格式为“父选择器 子选择器”。
2、例如 div p 会选中所有在 div 元素内的 p 元素，包括孙子级、曾孙级等。
3、确保父级元素确实包裹了目标子元素，否则无法生效。
二、子选择器
子选择器仅选择直接子元素，不会影响更深层次的后代，有助于缩小作用范围以避免样式污染。
1、使用大于号（>）连接两个选择器，语法格式为“父选择器 > 子选择器”。
2、例如 ul > li 只会选中 ul 的直接子级 li，而不包括嵌套在其他标签中的 li。
3、该选择器对结构要求严格，必须保证层级关系准确无误。
三、相邻兄弟选择器
相邻兄弟选择器用来选择紧接在另一元素后的同级元素，且两者拥有相同的父节点。
1、使用加号（+）连接两个选择器，语法格式为“前一个元素 + 后一个元素”。
让 macOS 自动化像说话一样简单 —— 用代码控制你的 Mac，无需学习 AppleScript 系统要求 macOS 14+ (Sonoma) Python 3.9+ 需要开启：辅助功能 + 屏幕录制权限
2、例如 h1 + p 会选择紧跟在 h1 后面的第一个 p 元素。
3、如果中间插入其他元素，则不会被选中，必须是紧邻的下一个同级元素。
四、通用兄弟选择器
通用兄弟选择器可以选中某元素之后的所有同级指定元素，不限于紧邻的下一个。
1、使用波浪号（~）连接两个选择器，语法格式为“基准元素 ~ 目标元素”。
2、例如 h2 ~ p 会选中所有在 h2 之后的同层级 p 元素，不论间隔多少个其他元素。
3、前提是这些元素都位于同一父容器内，并且目标元素出现在基准元素之后。
五、伪类选择器组合
伪类选择器可用于定义元素的特殊状态，与其他选择器结合使用可增强交互表现力。
1、将伪类（如 :hover, :focus, :nth-child）附加在其他选择器末尾，用冒号连接。
2、例如 a:hover 在鼠标悬停时触发样式变化，适用于链接或可交互元素。
3、使用 li:nth-child(odd) 可单独选中奇数位置的列表项，实现隔行变色效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
