CSS3-结构性伪类选择器

最新推荐文章于 2022-11-24 00:19:41 发布

weixin_30559481

最新推荐文章于 2022-11-24 00:19:41 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/guangzan/p/10306167.html

版权

:root

作用

?匹配元素所在文档的根元素。在HTML文档中，根元素始终是<html>。

演示

css

    :root {
        background-color: aquamarine;
    }

html

<body><!-- 什么都没写 --></body>

效果

在这里插入图片描述

:not

作用

?选择除某个元素之外的所有元素。

演示

css
        :root {
            --border: 1px solid #666;
            --green: lightgreen;
            --coral: lightcoral;
            --blue: blue;
            --yellow: yellow;
        }


        div {
            float: left;
            margin-left: 10px;
            width: 100px;
            height: 50px;
            border: var(--border);
            background-color: var(--green);
        }

        div:not(.item) {
            background-color: var(--coral);
        }

html

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="diff"></div>
    <div class="item"></div>

效果

在这里插入图片描述

:empty

作用

?选择没有任何内容的元素(有空格也不行)。

演示

css

    div:empty {
       background-color: var(--coral);
    }

html

    <div>    </div>
    <div>1231</div>
    <div>abc/div>
    <div>*()_</div>
    <div>...</div>
    <div></div>

效果

在这里插入图片描述

:target

作用

?表示一个唯一的元素（目标元素），其ID与URL的片段匹配

演示

css

    #first:target {
        background-color: var(--coral);
    }
    #second:target {
        background-color: var(--blue);
    }
    #third:target {
        background-color: var(--yellow);
    }

html

    <a href="#first">first</a>
    <a href="#second">second</a>
    <a href="#third">third</a>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>

效果

在这里插入图片描述

:first-child

作用

?选择元素中的第一个子元素。

演示

css

    div:first-child {
          background-color: var(--coral);
    }

html

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

效果

在这里插入图片描述

:last-child

作用

?选择元素的最后一个子元素。

演示

css

    div:last-child {
        background-color: var(--coral);
    }

html

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

效果

在这里插入图片描述

:nth-child(n)

作用

?定位某个父元素的一个或多个特定的子元素。
其中“n”是其参数。
n取值如下：

整数值(1 || 2 || 3 || 4 || ...)

参数n的起始值为1，不是0,若要选中第一个元素nth-child(1)。
表达式(2n+1 || -n+5 || ...)

为表达式时，n从0开始，表达式的值为0或小于0的时，不选择任何匹配的元素
关键词(odd || even)

odd 和 even 是可用于匹配下标是奇数(odd)或偶数(even)的子元素的关键词（第一个子元素的下标是 1）。

演示

css

    div:nth-child(2n) {
        background-color: var(--coral);
    }

html

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

效果

在这里插入图片描述

:nth-last-child(n)

作用

?从某父元素的最后一个子元素开始选择特定的元素。
n取值同nth-child(n)的n取值

演示

css

    div:nth-last-child(2n) {
        background-color: var(--coral);
    }

html

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

效果

在这里插入图片描述
***
完~

转载于:https://www.cnblogs.com/guangzan/p/10306167.html

weixin_30559481

关注

0
点赞
踩
0

收藏

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

:root作用
复制链接

扫一扫

CSS3-结构性伪类选择器

:root

作用

演示

效果

:not

作用

演示

效果

:empty

作用

演示

效果

:target

作用

演示

效果

:first-child

作用

演示

效果

:last-child

作用

演示

效果

:nth-child(n)

作用

演示

效果

:nth-last-child(n)

作用

演示

效果

“相关推荐”对你有帮助么？