css的复杂选择器

后代选择器

后代选择器使用空格间隔开 (A B:在A元素中寻找后代(不一定是儿子)是B的元素)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
       /* .box li{
            background-color: red;
        }*/
        div li{
            background-color: pink;
        }
        .show{}
        .box .show{}
        .outer .show{}
        html body div .show{}
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
        </ul>
        <ol>
            <li>333</li>
            <li>444</li>
        </ol>
    </div>

</body>
</html>Copy to clipboardErrorCopied
复制代码

 

子代选择器

子代选择器使用 > 间隔开 (A>B:在A元素中寻找儿子辈元素 是B的元素)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        .box>.show{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
            <li>
                <span class="show"></span>
            </li>
        </ul>
        <ol>
            <li>333</li>
            <li class="show">444</li>
        </ol>
    </div>

</body>
</html>Copy to clipboardErrorCopied
复制代码

 

相邻兄弟选择器:

相邻兄弟选择器使用 + 间隔开 (A+B:在A元素的下边紧贴着A的元素 并且是B 才能被选中)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .outer>.show+span{
            background-color: yellow;
        }
        .outer>.show+p{
            /*选不中状态*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

通用兄弟选择器:

相邻兄弟选择器使用 ~ 间隔开 (A~B:在A元素的下边兄弟元素 并且是B 就能被选中)

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        .outer>.show~span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

群组选择器:

  • 将多个选择器使用  隔开 可以同时对多个选择器设置样式
  • 如果多个元素有相同的样式,方法有两种
    • 使用一个共同的类名
    • 使用群组选择器
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*.con{
            width: 100px;
            height: 100px;
        }*/
        .con1,.con2,.con3,.con4{
            width: 100px;
            height: 100px;
        }
        .con1{

            background-color: red;
        }
        .con2{

            background-color: #c0ff8b;
        }
        .con3{

            background-color: #5e8fff;
        }
        .con4{

            background-color: #ff2a91;
        }

    </style>
</head>
<body>
<ul>
    <li class="con1 con"></li>
    <li class="con2 con"></li>
    <li class="con3 con"></li>
    <li class="con4 con"></li>
</ul>
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

交集选择器

  • “交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集
  • 其中第一必须是标签名选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*
            当我们想要选择: 某一个元素 并且这个元素拥有某个类名的时候

        */
        .list li{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 30px;
            border-radius: 50%;
            background-color: pink;
        }
        .list li.active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

选择器的优先级

相同优先级的选择器生效方式

  • 当优先级相同的时候,在后边书写的样式优先级高
  • link元素 其实也是把样式关联上,选择器优先级相同的情况写,后写的生效
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .con{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <link rel="stylesheet" href="./01.css">
</head>
<body>
    <div class="box con show">
        box
    </div>
</body>
</html>Copy to clipboardErrorCopied
复制代码

 

选择器优先级的权重计算:

  • 行内样式: 1000
  • id:100
  • 类:10
  • 标签名:1
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级2</title>
    <style>
        #box p{
            /*1 --101*/
            background-color: red;
        }
        #box .con p{
            /*2 -- 111*/
            background-color: pink;
        }
        .box #con p{
            /*3--111*/
            background-color: green;
        }
        .box .show p{
            /*4--21*/
            background-color: yellow;
        }
        .box .con .show p{
            /*5 -- 31*/
            background-color: grey;
        }
        #box .show p {
            /*6 --111*/
            background-color: purple;
        }
        #box #con .show p{
            /*7 -- 211*/
            background-color: #5ab3f4;
        }
        #box #con #show p{
            /*8  -- 301*/
            background-color: #5df2ff;
        }
    </style>
</head>
<body>
<div id="box" class="box">
    <div id="con" class="con">
        <div class="show" id="show">
            <p>我是一个p标签</p>
        </div>
    </div>
</div>
</body>
</html>Copy to clipboardErrorCopied
选择器优先级覆盖案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级覆盖案例</title>
    <style>
        .outer li{
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: grey;
            float: left;
        }

        .outer .active{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul class="outer">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <!-- 将来使用js,哪一个li拥有样式,就给它active的类名 -->
        <li class="active"></li>
        <li></li>
    </ul>
</body>
</html>
复制代码

 

posted @   z_bky  阅读(58)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示