CSS高级选择器可精准控制元素样式，包括属性选择器（如[title]、[type="text"]）、伪类选择器（如:hover、:focus、:nth-child(n)）、伪元素选择器（如::before、::after）及组合器选择器（如后代、子代、相邻兄弟等），实现灵活的样式设计与布局控制。
如果您希望在网页开发中更精确地控制元素的样式，CSS 提供了多种高级选择器来帮助您定位特定的元素。这些选择器能够基于属性、结构关系或状态进行匹配，从而实现更灵活的样式设计。
本文运行环境：MacBook Pro，macOS Sonoma
一、属性选择器
属性选择器可以根据元素的属性及其值来选择元素，适用于需要针对具有特定属性的元素应用样式的场景。
1、使用方括号语法选择具有某个属性的元素，例如 [title] 会选择所有带有 title 属性的元素。
立即学习“前端免费学习笔记（深入）”；
2、通过指定属性等于特定值的方式进行匹配，如 [type="text"] 可以选中 type 属性为 text 的 input 元素。
3、支持以特定值开头、结尾或包含某字符串的匹配方式，例如 [href^="https"] 选择 href 以 https 开头的链接，[href$=".pdf"] 选择以 .pdf 结尾的链接，[class*="btn"] 选择 class 属性中包含 btn 字符串的元素。
二、伪类选择器
伪类选择器用于选择处于特定状态的元素，比如用户交互状态或在文档树中的位置。
1、常见的交互状态伪类包括 :hover，它应用于鼠标指针悬停在元素上的情况。
2、使用 :focus 来选择当前获得焦点的表单元素，常用于提升可访问性体验。
3、结构性伪类如 :first-child 和 :last-child 分别选择父元素下的第一个和最后一个子元素。
4、更强大的 :nth-child(n) 可根据公式选择第 n 个子元素，例如 :nth-child(2n) 可选择偶数位置的子元素，实现隔行变色效果。
5、:not() 伪类允许排除满足条件的元素，例如 :not(.disabled) 可选择不包含 disabled 类的所有元素。
三、伪元素选择器
伪元素选择器用于选择元素的特定部分，通常是内容之前或之后的虚拟内容。
1、使用 ::before 在元素内容前插入生成的内容，需配合 content 属性使用。
2、使用 ::after 在元素内容后插入生成的内容，同样依赖于 content 属性定义插入内容。
3、::first-line 可对块级元素的第一行文本设置特殊样式，适用于文章排版。
4、::first-letter 用于设置段落首字母的样式，常见于杂志风格布局。
四、组合器选择器
组合器选择器通过结合多个选择器之间的关系来精确匹配目标元素。
1、后代选择器使用空格分隔两个选择器，例如 div span 会选中 div 内部所有的 span 元素，无论嵌套层级多深。
2、子元素选择器使用大于号（>）连接，如 ul > li 仅选择 ul 的直接子元素 li，不会影响更深层级的 li。
3、相邻兄弟选择器用加号（+）表示，例如 h1 + p 选择紧跟在 h1 后面的第一个 p 元素。
4、通用兄弟选择器使用波浪号（~），如 h1 ~ p 会选择 h1 之后所有同级的 p 元素，不限于紧邻的一个。
