前端学习之CSS——（4）

最新推荐文章于 2024-07-25 09:24:40 发布

努力编程的阿曼

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量50

点赞数

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

本文链接：https://blog.csdn.net/qq_62965644/article/details/132676333

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、层次选择器

<body>
    <p>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>

例如在以上的嵌套结构中，我们只希望外面的p标签被选择，而ul和li里面嵌套的p标签不被选择，这时候就要用到层次选择器

层次选择器有三种：后代选择器，子选择器，相邻选择器，通用选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p{
            background-color: aquamarine;
        } */
        /* 后代选择器 */
        body p{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>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>

如以上的选择器表示，在body后面的所有p标签都会被选择，效果如下

子选择器，和后代选择器类似但只有后面一代会被选择，并不选择嵌套结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p{
            background-color: aquamarine;
        } */
        /* 后代选择器 */
        /* body p{
            background-color: aqua;
        } */
        /* 子选择器 */
        body>p{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <p>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>p4</p>
</body>
</html>

相邻（兄弟）选择器：也就是和它一样的同一代将会被选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p{
            background-color: aquamarine;
        } */
        /* 后代选择器 */
        /* body p{
            background-color: aqua;
        } */
        /* 子选择器 */
        /* body>p{
            background-color: bisque;
        } */
        /* 相邻选择器 */
        .brother + p{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <p class="brother">p0</p>
    <p>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>p4</p>
</body>
</html>

它只会选择对应类的下一个标签（不对上）

通用选择器：他也会对应一个类，如何将它后面的同代全部选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p{
            background-color: aquamarine;
        } */
        /* 后代选择器 */
        /* body p{
            background-color: aqua;
        } */
        /* 子选择器 */
        /* body>p{
            background-color: bisque;
        } */
        /* 相邻选择器 */
        /* .brother + p{
            background-color: bisque;
        } */
        .brother~p{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <p class="brother">p0</p>
    <p>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>p4</p>
</body>
</html>

努力编程的阿曼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端学习之CSS——（4）

例如在以上的嵌套结构中，我们只希望外面的p标签被选择，而ul和li里面嵌套的p标签不被选择，这时候就要用到层次选择器。如以上的选择器表示，在body后面的所有p标签都会被选择，效果如下。子选择器，和后代选择器类似但只有后面一代会被选择，并不选择嵌套结构。层次选择器有三种：后代选择器，子选择器，相邻选择器，通用选择器。通用选择器：他也会对应一个类，如何将它后面的同代全部选择。相邻（兄弟）选择器：也就是和它一样的同一代将会被选择。它只会选择对应类的下一个标签（不对上）后代选择器：在某个元素的后面选择。
复制链接

扫一扫

专栏目录