CSS3结构性伪类

html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        div {
            border: 1px solid red;
            height: 30px;
        }
        /*:root选择器是选择html元素*/
        :root {
            background-color: brown;
        }

        /*===============================================================
            selector:nth-child(n):匹配符合selector,并且是其父元素的第n个元素
            n也可以写作odd(奇数)、even(偶数)
            n也可写作2n+1、3n+1、4n
            selector:nth-last-child(n):匹配符合selector,并且是其父元素的倒数第n个元素
            n也可以写作odd(奇数)、even(偶数)
        */
        div.son:nth-child(odd) {
            background-color: yellow;
        }

        /*===============================================================
            selector:first-child:匹配符合selector,并且是其父元素的首个子元素
        */
        div.firstlast-son:first-child {
            background-color: white;
        }
        /*===============================================================
            selector:last-child:匹配符合selector,并且是其父元素的最后一个子元素
        */
        div.firstlast-son:last-child {
            background-color: yellow;
        }

        /*===============================================================
            selector:only-child:匹配符合selector,并且是其父元素的唯一的子节点
        */
        p:only-child {
            background-color: white;
        }

        /*===============================================================
            selector:first-of-type:匹配符合selector,并且是与它同类型、同级的兄弟元素的第一个元素
            selector:last-of-type:匹配符合selector,并且是与它同类型、同级的兄弟元素的最后一个元素
            selector:nth-of-type(n):匹配符合selector,并且是与它同类型、同级的兄弟元素的第n个元素
            selector:nth-last-of-type(n):匹配符合selector,并且是与它同类型、同级的兄弟元素的倒数第n个元素
        */
        p.first-of-type:first-of-type {
            background-color: white;
        }
        p.first-of-type:last-of-type {
            background-color: yellow;
        }

        /*
            selector:empty:匹配符合selector,并且内部没有任何子元素的元素
        */
        div.empty:empty {
            background-color: yellow;
        }
    style>
head>
<body>
    <hr/>
        <div style="height: 60px">
            :root选择器是选择html元素<br/>
            :root {
            background-color: brown;
            }
        div>
    <hr/>
        <div style="height: 200px">
            /*把类名为son的div,且是他的父类的第奇数个选出来*/<br/>
            div.son:nth-child(odd) {
            background-color: yellow;
            }
            <div class="son">div>
            <div class="son">div>
            <div class="son">div>
            <div class="son">div>
        div>
    <hr/>
        <div style="height: 80px">
            <div style="height: 35px" class="firstlast-son">
                selector:first-child:匹配符合selector,并且是其父元素的首个子元素<br/>
                div.firstlast-son:first-child {
                background-color: white;
                }
            div>
            <div style="height: 35px;" class="firstlast-son">
                selector:last-child:匹配符合selector,并且是其父元素的最后一个子元素<br/>
                div.firstlast-son:last-child {
                background-color: yellow;
                }
            div>
        div>
    <hr/>
        <div style="height: 80px">
            <p>
                selector:only-child:匹配符合selector,并且是其父元素的唯一的子节点<br/>
                p:only-child {
                background-color: white;
                }
            p>
        div>
    <hr/>
        <div style="height: 200px">
            <span>这是spanspan>
            <p class="first-of-type">
                这是第一个p<br/>
                e:first-of-type:匹配符合e,并且是与它同类型、同级的兄弟元素的第一个元素<br/>
                p:first-of-type {
                background-color: white;
                }
            p>
            <p class="first-of-type">这是第二个pp>
            <p class="first-of-type">
                这是第三个p<br/>
                e:last-of-type:匹配符合e,并且是与它同类型、同级的兄弟元素的最后一个元素<br/>
                p:last-of-type {
                background-color: yellow;
                }
            p>
        div>
    <hr/>
        selector:empty:匹配符合selector,并且内部没有任何子元素的元素
        div.empty:empty {
        background-color: yellow;
        }
        <div style="height: 60px" class="empty">div>
        <div class="empty"><span>hahahaspan>div>
body>
html>

你可能感兴趣的:(CSS3结构性伪类)