[CSS]3.层次选择器

最新推荐文章于 2024-05-14 15:43:55 发布

MyLight1109

最新推荐文章于 2024-05-14 15:43:55 发布

阅读量88

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/weixin_46285081/article/details/118914971

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

层次选择器

1.后代选择器：在某个元素的后面

后代选择器 ul后面的p标签

        ul p{
            background: red;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器  ul后面的p标签*/
        ul p{
            background: red;
        }

    </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>

</body>
</html>

在这里插入图片描述

2.子选择器：儿子这一代

子选择器 body里面第一代的p标签

        body>p{
            background: blue;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*子选择器 body里面第一代的p标签*/
        body>p{
            background: blue;
        }

    </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>

</body>
</html>

在这里插入图片描述

3.相邻兄弟选择器：同辈（弟弟选择器）

相邻兄弟选择器 active下面的p标签，只有一个（弟弟选择器）

        .active + p{
            background: darkorange;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /*相邻兄弟选择器 active下面的p标签，只有一个（弟弟选择器）*/
        .active + p{
            background: darkorange;
        }

    </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>

</body>
</html>

在这里插入图片描述

4.通用选择器（所有弟弟选择器）

通用选择器 (所有弟弟选择器)

		.active~p{
            background: darkorange;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*通用选择器 (所有弟弟选择器)*/
        .active~p{
            background: darkorange;
        }

    </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>

</body>
</html>

在这里插入图片描述

MyLight1109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
[CSS]3.层次选择器

层次选择器1.后代选择器：在某个元素的后面后代选择器 ul后面的p标签 ul p{ background: red; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*后
复制链接

扫一扫