组合选择器

. 以 空格 分隔，从所有后代[子辈、孙辈、...]中选择符合条件的元素

. The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector.

. The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

. 以 > 分隔，从儿子中选择符合条件的元素

. 元素的伪元素::before、::after不是其直接后代

. 也叫兄弟/弟弟选择器 General sibling combinator

. The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

. 以 ~ 分隔，向后选择，从所有弟弟|little brothers中选择符合条件的元素

. 也叫相邻兄弟/小弟选择器 Adjacent sibling combinator

. The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent

. 以 + 分隔，选择相邻immediately followed的弟弟|little brother；应用非常广泛

. 以 点 . 连接 不是分隔，表示在当前样式的基础上，再叠加一个新样式

. 通常用于公共样式、专有样式或动态样式，如使用JS控制切换状态

. CCS文件中，新样式必须出现在当前样式的后面

. 叠加会增加优先级

//HTML5
<div class="box active"></div>
//CSS3
.box {
    opacity: 0.5;
}
.box.active {
    opacity: 1;
}

. 以 逗号, 分隔，表示样式同时适用于这些元素

. 一旦列表包含有一个无效选择器，则整个声明都无效[ 经验证，限制已解除 ]

. Multiple selectors share the same declarations

. The CSS selector list (,) selects all the matching nodes. A selector list is a comma-separated list of selectors

. Selector lists can also be passed as parameters to some functional CSS pseudo-classes

. Can improve consistency while reducing the size of style sheets

. When a selector list contains an invalid selector, the entire style block is ignored, except for the :is() and :where()

ul,ol {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:is(ul,ol) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

. 默认显示第一个标签页内容；其它隐藏

. 单击标签，对于的标签页内容显示，其它隐藏

. 高亮标签、定制滚动条

. 使用单选按钮 radio，绑定 label，结合 选中选择器 :checked、兄弟选择器 ~、相邻兄弟选择器 + 、属性选择器 综合实现

. 注意选择器对结构的要求