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>
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/zczhaod/p/17640416.html

标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签
4261 0元 限免
Web前端页面制作快速入门
5780 9.8元