HTML CSS 组合选择器

CSS 组合器
组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间,我们可以包含一个组合器。


CSS 中有四种不同的组合器:
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

后代选择器
后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 <div> 元素内的所有 <p> 元素:

div p {
  background-color: RED;
}

子选择器
子选择器匹配属于指定元素子元素的所有元素。
下面的例子选择属于 <div> 元素子元素的所有 <p> 元素:

div > p {
  background-color: RED;
}

相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素:

div + p {
  background-color: RED;
}

通用兄弟选择器
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素:

div ~ p {
  background-color: RED;
}

CSS 组合选择器简介

选择器示例示例描述
element elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择其父元素是 <div> 元素的所有 <p> 元素。
element+elementdiv + p选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。

如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!

发表评论

邮箱地址不会被公开。 必填项已用*标注