CSS 选择器

CSS 选择器是一种用于选择 HTML 或 XML 文档中的元素的模式。

基本选择器

• 标签选择器：选择 HTML 中指定标签的所有元素。例如：p 选择所有的段落元素。
• 类选择器：选择所有具有指定类的元素。例如：.my-class 选择所有类名为 my-class 的元素。
• ID 选择器：选择具有指定 ID 的元素。例如：#my-id 选择 ID 为 my-id 的元素。
• 通配符选择器：选择 HTML 或 XML 中的所有元素。例如：* 选择所有元素。

组合选择器

• 后代选择器：选择指定元素的后代元素。例如：div p 选择所有 div 元素内的所有段落元素。
• 子元素选择器：选择指定元素的直接子元素。例如：div > p 选择所有 div 元素子元素中的所有段落元素。
• 相邻兄弟选择器：选择指定元素后面紧跟着的兄弟元素。例如：h2 + p 选择紧跟在 h2 元素后面的段落元素。
• 通用兄弟选择器：选择指定元素后面所有的兄弟元素。例如：h2 ~ p 选择 h2 元素后面的所有段落元素。

属性选择器

• 存在与某一属性：选择具有指定属性的元素。例如：[href] 选择所有具有 href 属性的元素。
• 等于某一属性值：选择具有指定属性且属性值与指定值相等的元素。例如：[href="https://www.example.com"] 选择所有 href 属性等于 https://www.example.com 的元素。
• 包含某一属性值：选择具有指定属性且属性值包含指定值的元素。例如：[class~="my-class"] 选择所有 class 属性包含 my-class 的元素。
• 以某一字符串开始：选择具有指定属性且属性值以指定字符串开始的元素。例如：[href^="https://"] 选择所有 href 属性值以 https:// 开始的元素。
• 以某一字符串结尾：选择具有指定属性且属性值以指定字符串结尾的元素。例如：[src$=".jpg"] 选择所有 src 属性以 .jpg 结尾的元素。

伪类和伪元素

• 链接伪类：
  • :link 选择未访问过的链接。
  • :visited 选择已访问过的链接。
  • :hover 鼠标悬停在链接上时的状态。
  • :active 点击链接时的状态。
• 用户行为伪类：
  • :focus 选择得到焦点的元素。
  • :checked 选择被选中的元素。
  • :disabled 选择禁用的元素。
• 结构伪类：
  • :first-child 选择作为父元素的第一个子元素的元素。
  • :last-child 选择作为父元素的最后一个子元素的元素。
  • :nth-child(n) 选择作为父元素的第 n 个子元素的元素。
  • :nth-last-child(n) 选择作为父元素的倒数第 n 个子元素的元素。
  • :first-of-type 选择作为父元素的第一个具有相同类型的子元素的元素。
  • :last-of-type 选择作为父元素的最后一个具有相同类型的子元素的元素。
  • :nth-of-type(n) 选择作为父元素的第 n 个具有相同类型的子元素的元素。
  • :nth-last-of-type(n) 选择作为父元素的倒数第 n 个具有相同类型的子元素的元素。
  • :only-child 选择作为唯一子元素的元素。
  • :only-of-type 选择作为唯一具有相同类型的子元素的元素。
• 伪元素：
  • ::before 向元素内容之前插入生成的内容。
  • ::after 向元素内容之后插入生成的内容。
  • ::first-letter 选择元素内容的第一个字母。
  • ::first-line 选择元素内容的第一行。
  • ::selection 选择用户选中的部分。

以上就是 CSS 选择器的基础知识。选择器的组合和使用场景非常丰富，可以根据实际需要选择适合的选择器。