QD1-P24 CSS 组合选择器
本节学习：CSS 组合选择器
本节视频
https://www.bilibili.com/video/BV1n64y1U7oj?p=24
组合选择器是使用多个基础选择器组合在一起来选择更具体的目标元素的方法。以下是几种常见的组合选择器：
下面四个选择器是本节学习内容
后代选择器（Descendant Combinator）
选择指定元素内部的所有匹配的后代元素。（子子孙孙）
- 语法：
ancestor descendant { style properties } - 示例：
ul li { color: blue; } 选择所有<ul>元素内的<li>元素。
子选择器（Child Combinator）
选择指定元素的直接子元素。
- 语法：
parent > child { style properties } - 示例：
div > p { color: red; } 选择所有直接父元素为<div>的<p>元素。
相邻兄弟选择器（Adjacent Sibling Combinator）
选择紧接在指定元素之后的第一个兄弟元素。
- 语法：
prev + next { style properties } - 示例：
h1 + p { margin-top: 0; } 选择所有紧接在<h1>元素之后的第一个<p>元素。
通用兄弟选择器（General Sibling Combinator）
选择指定元素之后的所有兄弟元素。
- 语法：
prev ~ siblings { style properties } - 示例：
h1 ~ p { font-style: italic; } 选择所有<h1>元素之后的<p>兄弟元素。
下面三个选择器是拓展
分组选择器（Grouping Selector）
将多个选择器组合在一起，以相同的样式规则应用给它们。
- 语法：
selector1, selector2, selectorN { style properties } - 示例：
h1, h2, h3 { font-family: Arial, sans-serif; } 为<h1>,<h2>, 和<h3>元素设置相同的字体。
属性选择器组合
将属性选择器与其他类型的选择器组合使用。
- 示例：
a[href^="http"] { background: url('link.png') no-repeat right; } 选择所有<a>元素的href属性值以"http"开头的。
伪类和伪元素组合
将伪类或伪元素与其他类型的选择器组合使用。
- 示例：
input[type="text"]:focus { border: 1px solid blue; } 选择获得焦点的文本输入框。
组合选择器可以更精确地定位页面上的元素，并减少对特定类或ID的依赖，从而使得样式表更加简洁和高效。不过，过度使用组合选择器可能会导致选择器过于复杂，降低CSS的可读性和可维护性。
用图片理解四个选择器
- 后代，如图所示
- 子代，如图所示
- 相邻兄弟，如图所示
- 通用兄弟，如图所示
