CSS学习04之层次选择器

最新推荐文章于 2023-05-19 22:28:59 发布

小黑神zxs

最新推荐文章于 2023-05-19 22:28:59 发布

阅读量438

点赞数 1

分类专栏： CSS3详解文章标签： css css3 html 层次选择器 idea

本文链接：https://blog.csdn.net/zxs1002/article/details/122867238

版权

CSS3详解专栏收录该内容

18 篇文章 0 订阅

订阅专栏

回顾

什么是选择器

在 CSS 中，选择器是选取需设置样式的元素的模式。

选择器的作用

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
方便我们对元素添加样式。

层次选择器

基本选择器又分为三种方式：

后代选择器
子选择器
相邻选择器
通用选择器

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        <!--标签选择器-->
        p{
            background: #148aff;
        }

        /*后代选择器：在选定元素后面的所有某元素*/
        body p{
            background: deeppink;
        }

        /*子选择器：在某选定元素后面一代的某元素*/
        body>p{
            background: red;
        }

        /*相邻兄弟选择器：对下不对上且不包括自己*/
        .action+p{
            background: green;
        }

        /*通用兄弟选择器:对下不对上且不包括自己*/
        .active~p{
            background: purple;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p class="action">p7</p>
<p>p8</p>
</body>
</html>

效果

在这里插入图片描述

小结

层次选择器顾名思义是有层次的感觉，从以上代码不难看出！

作者有话说

博客创作不易，希望看到这里的读者动动你的小手点个赞，如果喜欢的小伙伴可以一键三连，作者大大在这里给大家谢谢了。

小黑神zxs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习04之层次选择器

回顾什么是选择器在 CSS 中，选择器是选取需设置样式的元素的模式。选择器的作用CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。方便我们对元素添加样式。层次选择器基本选择器又分为三种方式：后代选择器子选择器相邻选择器通用选择器示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>层次选择器&l
复制链接

扫一扫