HTML5 有哪些层次选择器

在 HTML5 的世界里，层次选择器是强大且实用的工具，能帮助开发者精准地选中特定元素，从而实现更高效的样式设计与脚本操作。

首先要了解的是后代选择器。它使用空格作为分隔符，用于选择某个元素的所有后代元素。例如，“body p”，这表示选择 body 元素内的所有 p 元素。无论 p 元素嵌套得多深，只要在 body 元素的层级结构内，都会被选中。后代选择器在处理复杂的页面布局时非常有用，比如在一个大型的导航栏结构中，通过“nav ul li”就可以精准定位到导航栏下的每一个列表项，方便为其设置独特的样式，如颜色、字体大小等。

紧接着是子元素选择器，使用“>”符号。与后代选择器不同，它只选择元素的直接子元素。例如，“div > p”，只会选中 div 元素的直接子元素 p，而不会选择 div 元素内部嵌套更深层次的 p 元素。当你只想对某元素的直接子元素进行样式调整时，子元素选择器就派上用场了。比如一个卡片式布局，每个卡片都是一个 div，而卡片内的标题是直接子元素 h3，此时“div > h3”就能精准地设置标题样式，而不会影响到卡片内其他层级的元素。

相邻兄弟选择器用“+”表示。它选择紧接在某元素之后的相邻兄弟元素。例如，“h2 + p”，会选择紧跟在 h2 元素后面的第一个 p 元素。这种选择器在一些特殊的布局中很实用，比如文章标题后的第一段文字，使用相邻兄弟选择器就能单独为其设置不同的样式，如字体加粗或添加特殊的边框效果。

还有通用兄弟选择器，用“~”表示。它会选择在某元素之后的所有兄弟元素。例如，“h3 ~ p”，会选择 h3 元素之后的所有 p 元素兄弟。在一个页面中有多个标题和段落的情况下，利用通用兄弟选择器可以对特定标题之后的所有段落进行统一的样式设置，如改变颜色、行间距等。

HTML5 的这些层次选择器各有特点，合理运用它们，能极大提升页面开发的效率和效果，让页面呈现出更加丰富多样的样式。