CSS选择器（2）

心在员方

已于 2022-11-04 08:35:41 修改

阅读量83

点赞数

文章标签： css 前端 javascript

于 2022-11-04 08:32:00 首次发布

本文链接：https://blog.csdn.net/qq_54520302/article/details/127645057

版权

CSS 组合器

CSS 组合器

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

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

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

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

1.后代选择器

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

下面的例子选择 <div> 元素内的所有 <p> 元素：

实例:

本章节所有代码：

<!DOCTYPE html>
<html>
<head>
<style>

div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

</body>
</html>

2.子选择器

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

下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：

实例

div > p {
  background-color: yellow;
}

3.相邻兄弟选择器

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

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

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：

实例

div + p {
  background-color: yellow;
}

4.通用兄弟选择器

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

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

实例

div ~ p {
  background-color: yellow;
}

心在员方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器（2）

CSS 组合器组合器是解释选择器之间关系的某种机制。CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。CSS 中有四种不同的组合器：后代选择器 (空格)子选择器（>）相邻兄弟选择器 (+)通用兄弟选择器 (~)
复制链接

扫一扫