CSS 组合器

CSS 组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择

元素内的所有

元素：

Furorin

div p {
  background-color: yellow;
}

Fura dake

子选择器

子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于

元素子元素的所有

元素：

Furorin

div > p {
  background-color: yellow;
}

Fura dake

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随

元素之后的所有

元素：

Furorin

div + p {
  background-color: yellow;
}

Fura dake

通用兄弟选择器

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于

元素的同级元素的所有

元素：

Furorin

div ~ p {
  background-color: yellow;
}

Fura dake

Dukkan CSS girmama yanki

A zina Furorin Furorin samari
element element div p A zina <div> yanki haka dukkan <p> yanki.
element>element div > p ƙaɗaɗa
element+element div + p ƙaɗaɗa
element1~element2 p ~ ul ƙaɗaɗa

ƙaɗaɗa

ƙaɗaɗaCSS ƙaɗaɗa

ƙaɗaɗaCSS ƙaɗaɗa

ƙaɗaɗaCSS ƙaɗaɗa