结构伪类选择器和层次选择器的使用(学自狂神)

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: green;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #2700ff;
        }

        /*选中p1 定位到父元素,选择当前的第一个元素
        选择当前p元素的父级选用,选中父级元素的第一个
        并且是当前元素
        */
        p:nth-child(1)P{
            background: cadetblue;
        }

        /*选中父元素下的p元素的第二个类型*/
        p:nth-of-type(1){
            background: yellow;
        }


    </style>

</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p1</p>
<p>p1</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

层次选择器

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

    <style>
        /*后代选择器*/
        body p {
            background: red;
        }

        /*子选择器*/
        body>p{
            background: #2700ff;
        }

        /*相邻兄弟选择器:只有一个,相邻(向下)*/
        .active+p{
            background: green;
        }

        /*通用兄弟选择器,当前选中的元素向下的所有兄弟元素*/
        .active~p{
            background: #2700ff;
        }

    </style>

</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>
</html>

你可能感兴趣的:(css3)