至今头条

3 CSS组合选择器

2023-08-18 17:25 由 生而自由爱而无畏 发表于 #前端开发
3 组合选择器

页面元素比较复杂，存在多个嵌套。为了更加灵活选择页面中的元素，CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。

后代子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        .c1 .c2{
            color: red;
        }
        /*子代选择器*/
        .c3 .c5{
            color: red;
        }
        .c3 > .c5{
            color: red;
        }
        .c3 .c4 .c5{
            color: red;
        }

    </style>
</head>
<body>

<!--后代选择器-->
<div class="c1">
    <div class="c2">item1</div>
</div>
<div class="c2">item2</div>

<!--子代选择器-->
<div class="c3">
    <div class="c4">
        <div class="c5">item3</div>
    </div>
     <div class="c5">item4</div>
</div>

</body>
</html>
与或选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*与选择器	使用 . 相连*/
        p.c1{
            color: red;
        }
         /*或选择器 使用 ，相连*/
        p.c1,#i1{
            color: red;
        }

    </style>
</head>
<body>

<!--与选择器-->
<div class="c1">item1</div>
<p class="c1">item2</p>
<div>item3</div>
<p id="i1">item4</p>

</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*相邻兄弟选择器	使用符号 + 连接*/
       #i1 + div.c1{
           color: red;
       }
       #i1 + div.c2{
           color: red;
       }

        /*普遍兄弟选择器	使用符号 ~ 连接*/
        #i1 ~ div.c2{
           color: red;
        }
        #i1 ~ div{
           color: red;
        }

    </style>
</head>
<body>

<p id="i1">item0</p>
<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css组合选择器</title>

    <style>
        /*.c2{*/
        /*    color: red;*/
        /*}*/

        /*子代选择器*/
        .c1 > .c3{
            color: chartreuse;
        }

        /*后代选择器*/
        .c1 .c2 .c3{
            color: gold;
        }
    </style>

</head>

<body>
<div class="c1">
    <div class="c2">
        <div class="c3">item1</div>
    </div>
</div>

<div class="c1">
    <div class="c3">item2</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css组合选择器2</title>

    <style>
        p.c1, #i1{
            color: red;
            background-color: darkseagreen;
            font-size: 30px;
        }

    </style>

</head>
<body>

<div class="c1">item1</div>
    <p class="c1">item2</p>
<div>item3</div>

<p id="i1">item4</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css组合选择器3</title>

    <style>
        /*毗邻选择器*/
        /*.c2+.c3{*/
        /*    color: red;*/
        /*}*/

        /*普通兄弟选择器*/
        .c2 ~ div{
            color: gold;
        }
    </style>

</head>
<body>

<div class="c1">item1</div>
<div class="c2">item2</div>
<div class="c3">item3</div>
<div class="c4">item4</div>
<div class="c5">item5</div>
<p>item6</p>

</body>
</html>

热门相关：恭喜你被逮捕了   本法官萌萌哒   本法官萌萌哒   不科学御兽   后福