css的复杂选择器

标签：box show color 复杂 100px background 选择器 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>

标签：box,show,color,复杂,100px,background,选择器,css
From： https://www.cnblogs.com/z-bky/p/17038811.html