CSS 组合选择符学习笔记

什么是组合选择符？

组合选择符是一种 CSS 选择符，它可以通过将两个或多个单独的选择符组合在一起来选择具有特定关系的元素。这些关系可以是父子、兄弟、相邻元素等。

组合选择符使用不同的符号来表示不同的关系。下面是一些常用的组合选择符：

• 后代选择符（空格）：选择指定元素下的所有后代元素。
• 子元素选择符（>）：选择指定元素的直接子元素。
• 相邻兄弟选择符（+）：选择指定元素之后的第一个兄弟元素。
• 一般兄弟选择符（~）：选择指定元素之后的所有兄弟元素。

实例演示

后代选择符

后代选择符使用空格表示，它会选择指定元素下的所有后代元素。例如，下面的 CSS 代码会选择所有 div 元素下的所有 p 和 span 元素：

cssCopy Code
div p,
div span {
  /* styles */
}

子元素选择符

子元素选择符使用大于号（>）表示，它会选择指定元素的直接子元素。例如，下面的 CSS 代码会选择所有 ul 元素下的直接子元素 li：

cssCopy Code
ul > li {
  /* styles */
}

相邻兄弟选择符

相邻兄弟选择符使用加号（+）表示，它会选择指定元素之后的第一个兄弟元素。例如，下面的 CSS 代码会选择每个 h2 元素之后的第一个 p 元素：

cssCopy Code
h2 + p {
  /* styles */
}

一般兄弟选择符

一般兄弟选择符使用波浪号（~）表示，它会选择指定元素之后的所有兄弟元素。例如，下面的 CSS 代码会选择每个 h2 元素之后的所有 p 元素：

cssCopy Code
h2 ~ p {
  /* styles */
}

总结

组合选择符是非常有用的 CSS 选择器，可以帮助我们更准确地选择需要的元素。在实际开发中，我们可以根据具体的需求灵活运用这些选择符，以达到更好的设计效果。