CSS3结构性伪类

最新推荐文章于 2023-06-22 19:29:38 发布

Missingmusic

最新推荐文章于 2023-06-22 19:29:38 发布

阅读量269

点赞数

本文链接：https://blog.csdn.net/Missingmusic/article/details/47380837

版权

<!DOCTYPE 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>这是span</span>
            <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">这是第二个p</p>
            <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>hahaha</span></div>
</body>
</html>

Missingmusic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3结构性伪类

html>html>head lang="en"> meta charset="UTF-8"> title>title> style type="text/css"> div { border: 1px solid red; height: 30px; } /*:root选择
复制链接

扫一扫