1. **后代选择器（Descendant Selector）**
后代选择器用于选取某个祖先元素内部的所有特定类型的后代元素。它由两个或多个用空格分隔开的简单选择器组成。例如，“div p”表示选中文档里所有位于`
`标签内的`<p>`段落元素：
div p {
color: red;
}
上述规则会把嵌套在任何`div`内层的每个`p`元素的文字颜色设为红色。
2. **子元素选择器（Child Combinator / Child selector）**
子元素选择器只针对直接父级下的第一个级别子元素生效，其符号是“>”。比如：“ul > li”，这将会匹配到作为`<ul>`直系列表项目的每一个`<li>`项：
ul > li {
background-color: yellow;
}
此时只有那些直接包含于`<ul>`之内的`<li>`会被赋予黄色背景色。
3. **相邻兄弟选择器（Adjacent Sibling Selectors 或 Next-Sibling combinator）**
相邻兄弟选择器用来指定紧跟在一个元素后的同辈首个元素，使用加号"+"来实现这一功能。如"p + h2"会选择紧接在一个`<p>`之后的第一个`<h2>`:
p + h2 {
margin-top: 0px;
}
这意味着当一个`<h2>`元素紧接着一个`<p>`元素出现时，它的顶部外边距被清除。
4. **普通同胞选择器（General sibling selectors 或 Subsequent-siblings combinator）**
普通同胞选择器可以找到同一个父元素下，在某元素后面的所有同类元素，通过波浪线(~)操作符连接前后两个选择器表达这种关联。例："p ~ span" 将应用于任何一个跟在一个`<p>`后面的``元素：
p ~ span {
font-weight: bold;
}
<!-- 示例结构 -->
<p></p>
<div></div>
<span>This text will be bold</span>
<span>This one too!</span>
以上四类基于层次关系的CSS选择器极大地丰富了我们对页面样式的控制能力，使得我们可以更准确地定义和操纵DOM树上不同位置节点的呈现效果，进而打造出更为精细复杂的网页布局及交互设计。理解并熟练运用这些选择器对于提高web开发者的工作效率具有重要意义。
css
div p {
color: red;
}
上述规则会把嵌套在任何`div`内层的每个`p`元素的文字颜色设为红色。
2. **子元素选择器（Child Combinator / Child selector）**
子元素选择器只针对直接父级下的第一个级别子元素生效，其符号是“>”。比如：“ul > li”，这将会匹配到作为`<ul>`直系列表项目的每一个`<li>`项：
css
ul > li {
background-color: yellow;
}
此时只有那些直接包含于`<ul>`之内的`<li>`会被赋予黄色背景色。
3. **相邻兄弟选择器（Adjacent Sibling Selectors 或 Next-Sibling combinator）**
相邻兄弟选择器用来指定紧跟在一个元素后的同辈首个元素，使用加号"+"来实现这一功能。如"p + h2"会选择紧接在一个`<p>`之后的第一个`<h2>`:
css
p + h2 {
margin-top: 0px;
}
这意味着当一个`<h2>`元素紧接着一个`<p>`元素出现时，它的顶部外边距被清除。
4. **普通同胞选择器（General sibling selectors 或 Subsequent-siblings combinator）**
普通同胞选择器可以找到同一个父元素下，在某元素后面的所有同类元素，通过波浪线(~)操作符连接前后两个选择器表达这种关联。例："p ~ span" 将应用于任何一个跟在一个`<p>`后面的``元素：
css
p ~ span {
font-weight: bold;
}
<!-- 示例结构 -->
<p></p>
<div></div>
<span>This text will be bold</span>
<span>This one too!</span>
以上四类基于层次关系的CSS选择器极大地丰富了我们对页面样式的控制能力，使得我们可以更准确地定义和操纵DOM树上不同位置节点的呈现效果，进而打造出更为精细复杂的网页布局及交互设计。理解并熟练运用这些选择器对于提高web开发者的工作效率具有重要意义。