CSS 选择器

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>选择器分组</title>
    <style>
        a.div {
            color: blue;
        }

        .p1 {
            color: blue;
        }

        .p2 {
            font-size: 30px;
        }

        /*.p3 {
            font-style: italic;
        }*/
        .p1.p2 {
            font-style: italic;
        }

        #myDiv {
            color: red;
        }

        [title] {
            color: red;
        }

        [href] {
            font-size: 30px;
        }

        [href="https://www.baidu.com/"] {
            color: lightgray;
        }

        [title~='title'] {
            font-size: 50px;
        }

        /*p strong {
            color: blue;
        }*/
        p > strong {
            color: fuchsia;
            font-size: 30px;
        }

            p > strong > i {
                color: blue;
                font-size: 30px;
            }

        li + li {
            font-size: 50px;
            color: lightblue;
        }
    </style>
</head>
<body>
    <div class="div">
        hello world
    </div>
    <a class="div">kikyo</a>

    <div>
        =============================================
    </div>

    <p class="p1">this is a page</p>
    <p class="p2">this is a page</p>
    <p class="p1 p2">this is a page</p>

    <div>
        =============================================
    </div>

    <div id="myDiv"> lalala </div>
    <div class="div2">lalala</div>
    <div class="div2">lalala</div>
    <div class="div2">lalala</div>

    <div>
        =============================================
    </div>

    <p title="tit">哈哈</p>
    <p title="title">哈哈</p>
    <p title="t">哈哈</p>
    <p title="title hello">哈哈</p>
    <a href="https://www.baidu.com/">哈哈哈</a>
    <!--<p>this is my <strong>web</strong> page</p>-->
    <p>this is my <strong>web <i> hello</i></strong> page</p>

    <div>
        =============================================
    </div>

    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <ol>
            <li>item11</li>
            <li>item22</li>
            <li>item33</li>
        </ol>
    </div>

</body>
</html>

 

posted @ 2019-06-30 17:13  一只桔子2233  阅读(127)  评论(0)  编辑  收藏  举报