最新的Web开发教程
 

CSS组合子


CSS组合子

注意 一个组合子是什么,解释了选择之间的关系。

CSS选择器可以包含多个简单的选择。 简单的选择之间,我们可以包括组合子。

有CSS3中四个不同的组合程序:

  • 后代选择器(space)
  • 子选择器(>)
  • 相邻兄弟选择(+)
  • 普通兄弟选择(~)

后代选择

后代选择是特定元素的后代的所有元素相匹配。

以下示例选择所有<p>中的元素<div>元素:

div p {
    background-color: yellow;
}
试一试»

子选择器

孩子选择器选择是指定的元素的直接子的所有元素。

以下示例选择所有<p>这是一个直接的子元素<div>元素:

div > p {
    background-color: yellow;
}
试一试»

相邻兄弟选择

相邻兄弟选择器选择是指定元素的兄弟姐妹相邻的所有元素。

同级元素必须具有相同的父元素,而“相邻”的意思是“紧跟”。

以下示例选择所有<p>被后立即放置元素<div>元素:

div + p {
    background-color: yellow;
}
试一试»

一般兄弟选择

一般兄弟选择选择是指定元素的兄弟姐妹的所有元素。

以下示例选择所有<p>这是兄弟元素<div>元素:

div ~ p {
    background-color: yellow;
}
试一试»

自测练习用!

练习1» 练习2» 练习3» 练习4»