CSS关系选择器

最新推荐文章于 2023-11-20 15:48:54 发布

不会写代码的菜

最新推荐文章于 2023-11-20 15:48:54 发布

阅读量89

点赞数

分类专栏： css 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125375224

版权

css 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

关系选择器

想要了解关系选择器,我们首先要了解都有什么关系

父元素

直接包含子元素的叫做父元素
子元素

被包含的元素称为子元素
祖先元素

直接或间接包含其他元素的元素称为祖先元素
- 一个元素的父元素也是它的祖先元素
后代元素

直接或间接被祖先元素包含的元素
- 子元素也是后代元素
兄弟元素

拥有相同父元素的元素之间称为兄弟元素

我们可以注意到,祖先元素和后代元素的范围比子元素和父元素的范围更大

下面我们从一个需求开始介绍关系选择器

栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div>
            我是一个div
            
            <p>
                我是div中的p元素
                <span>
                    我是p元素中的span
                </span>
            </p>
        </div>
        <span>
            我是div外的大聪明
        </span>
    </body>
</html>

需求: 为div的子元素span设置字体颜色为红色

子元素选择器:

作用: 选中一个指定父元素的指定子元素
语法: 父元素>子元素
```
div>span{
    color:red;
}
```
- 但是此时只要是满足条件的所有元素都会被选中.如果我们想要只选择某一个,就不能直接选择,需要再给相应元素加一个calss来分组即可完成操作.
```
div.box>span{
    color: red;
}
```

后代元素选择器:

作用: 选中指定元素中的指定后代元素
语法: 祖先元素后代元素
```
div span{
   color: red;
}
```
- 这样我们就选择了div中的所有span元素,不论它是子元素还是父元素中的子元素,都能够选择到.

选择下一个兄弟:

语法: 前一个 + 后一个
```
p + span{
    color: red;
}
```
- 注: 这样只能选择一个,会选择紧邻的下一个元素,如果中间有其他元素,则无法选择到.

选择下边所有兄弟:

语法: 兄 ~ 弟
```
p ~ sapn{
   color: red;
}
```
- 注: 这样只会选择后面的所有元素,不会选择前面的.

不会写代码的菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS关系选择器

想要了解关系选择器,我们首先要了解都有什么关系父元素直接包含子元素的叫做父元素子元素被包含的元素称为子元素祖先元素直接或间接包含其他元素的元素称为祖先元素一个元素的父元素也是它的祖先元素后代元素直接或间接被祖先元素包含的元素子元素也是后代元素兄弟元素拥有相同父元素的元素之间称为兄弟元素我们可以注意到,祖先元素和后代元素的范围比子元素和父元素的范围更大下面我们从一个需求开始介绍关系选择器需求: 为div的子元素span设置字体颜色为红色子元素选择器: 作用: 选中一个指定父元素的指
复制链接

扫一扫