CSS 中可以使用组合选择器来同时选择两个或更多元素,从而实现对它们的样式规则的统一定义。常用的组合选择器有:
后代选择器:用空格分隔开两个元素,表示选择第一个元素的后代中符合条件的第二个元素。例如 div p
表示选择所有在 div
元素内部的 p
元素。
子元素选择器:用大于号 >
分隔开两个元素,表示选择第一个元素的子元素中符合条件的第二个元素。例如 ul > li
表示选择所有直接在 ul
元素下的 li
元素。
相邻兄弟选择器:用加号 +
分隔开两个元素,表示选择第一个元素后面紧跟着的符合条件的第二个元素。例如 h1 + p
表示选择紧接在 h1
元素后面的 p
元素。
通用兄弟选择器:用波浪号 ~
分隔开两个元素,表示选择第一个元素后面的所有符合条件的兄弟元素。例如 p ~ span
表示选择所有与 p
元素在同一级且在 p
元素之后的 span
元素。
以上是 CSS 中常见的组合选择器,它们可以灵活应用,让我们在样式设计中更加方便。