组合选择器(Combinator Selectors)是一种CSS选择器,用于选择满足多个选择器条件的特定元素。组合选择器由两个或多个简单选择器组合而成,它们描述了元素之间的关系。这些关系可以是父子关系、兄弟关系等,从而允许您更精确地选择元素以应用样式。
以下是一些常见的组合选择器及其示例:
-
后代选择器(Descendant Selector):选择指定元素内部的所有符合条件的后代元素。后代选择器使用空格分隔选择器。
示例:
div p { /* 选择 div 元素内部的所有 p 元素 */ }
-
子元素选择器(Child Selector):选择指定元素的直接子元素。子元素选择器使用
>
符号分隔选择器。示例:
ul > li { /* 选择 ul 元素内部的直接子元素 li 元素 */ }
-
相邻兄弟选择器(Adjacent Sibling Selector):选择与指定元素在同一层级且紧接在它后面的元素。相邻兄弟选择器使用
+
符号分隔选择器。示例:
h2 + p { /* 选择紧接在 h2 元素后面的 p 元素 */ }
-
通用兄弟选择器(General Sibling Selector):选择与指定元素在同一层级的所有后续兄弟元素。通用兄弟选择器使用
~
符号分隔选择器。示例:
h2 ~ p { /* 选择所有与 h2 元素在同一层级的 p 元素 */ }
组合选择器允许您在选择元素时考虑它们之间的关系,从而更精确地应用样式。组合选择器通常与其他类型的选择器(如类、ID、属性选择器等)一起使用,以构建复杂的选择规则,从而实现各种不同的样式和布局效果。