CSS高级选择器-----层次选择器

@睡不醒的每天@

已于 2022-06-05 21:41:29 修改

阅读量968

点赞数

文章标签： css css3 前端

于 2022-06-05 21:30:46 首次发布

本文链接：https://blog.csdn.net/m0_67929156/article/details/125127503

版权

层次选择器分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        
    </style>
</head>
<body>
<h1>主题1</h1>
<h1>主题2</h1>
<p>主题3</p>
<ul>
    <li><h1>1</h1></li>
    <li><p>2</p></li>
    <li>3</li>
</ul>
</body>
</html>

1、后代选择器

 某个标签的后面：祖父，爷爷，爸爸

实现代码：

<style>
        body h1{/**
        body 标签后面包含h1的标签会被选中进行修饰
        **/
            background: aqua;
        }
        ul li{
     /** ul标签后面包含li的标签会被选中进行修饰
        **/
            background: aqua;
}

    </style>

2、子选择器

  一代某个标签后面第一代标签

代码实现：

<style>
       /*
       子选择器只会选择第一代标签后面相同的标签不会被修饰
       body>h1:只会选择body后的第一代h1标签，后面出现的h1标签不会修饰
       */
        body>h1{

            background: red;
        }
        body>p{

            background: chartreuse;
        }
    </style>

3、相邻兄弟选择器

相邻兄弟只会选中一个（向下相邻）
代码实现：

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

        .id+p{
            background: red;
        }

        .action+li{

            background: red;
        }

    </style>
</head>
<body>
<p>主题1</p>
<p class="id">主题2</p>
<p>主题3</p>
<ul>
   <li>1</li>
    <li class="action">2</li>
    <li>3</li>

</ul>
</body>
</html>

4、通用选择器

通用选择器会选中相邻以下所有标签进行修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .id~p{/* 选中class为id以下的所有标签 */

            background: red;
        }

    </style>
</head>
<body>
<p>主题1</p>
<p class="id">主题2</p>
<p>主题3</p>
<ul>
   <li>1</li>
    <li class="action">2</li>
    <li>3</li>

</ul>
<p>主题4</p>
</body>
</html>

总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .id~p{/*
        通用选择器
        */

            background: red;
        }
    .action+li{
        /* 相邻选择器
        相邻向下

        */
        background: aquamarine;
    }

        body p{
            /*后代选择器
            *
             */

            background: chartreuse;
        }

        body>p{/*
        子类选择器
        
        */

            background: bisque;
        }

    </style>
</head>
<body>
<p>主题1</p>
<p class="id">主题2</p>
<p>主题3</p>
<ul>
   <li>1</li>
    <li class="action">2</li>
    <li><p>3</p></li>

</ul>
<p>主题4</p>
</body>
</html>