1. 后代选择符（Descendant combinator）：
后代选择符用空格表示，选择符之间的关系是包含关系。它选择了所有符合条件的后代元素。
.container p {
/* 选择所有在 class 为 container 的元素内的 p 元素 */
color: blue;
}
2. 直接子元素选择符（Child combinator）：
直接子元素选择符用 > 表示，选择符之间的关系是父子关系。它选择了所有符合条件的直接子元素。
.container > p {
/* 选择所有作为 class 为 container 的直接子元素的 p 元素 */
color: red;
}
3. 相邻兄弟选择符（Adjacent sibling combinator）：
相邻兄弟选择符用 + 表示，选择符之间的关系是相邻兄弟关系。它选择了紧接在指定元素之后的兄弟元素。
h2 + p {
/* 选择紧接在 h2 元素后的 p 元素 */
font-weight: bold;
}
4. 通用兄弟选择符（General sibling combinator）：
通用兄弟选择符用 ~ 表示，选择符之间的关系是兄弟关系。它选择了所有符合条件的兄弟元素。
h2 ~ p {
/* 选择所有与 h2 元素拥有相同父元素的 p 元素 */
color: green;
}
组合使用：
这些组合选择符可以组合使用，以实现更复杂的选择条件。
.container > ul li {
/* 选择 class 为 container 的直接子元素下的 ul 元素下的所有 li 元素 */
list-style-type: square;
}
这些组合选择符使得选择元素的范围更加灵活，允许你根据文档结构选择所需的元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4011/CSS