CSS-选择器11-first-of-type、last-of-type、nth-of-type 和 nth-last-of-type

最新推荐文章于 2023-02-16 13:52:10 发布

weixin_33887443

最新推荐文章于 2023-02-16 13:52:10 发布

阅读量147

点赞数

原文链接：https://yq.aliyun.com/articles/605580

版权

CSS选择器-系列文章

1、选择器说明

选择器	例子	例子描述	CSS
:first-of-type	p:first-of-type	选择属于其父元素的首个 p 元素的每个 p 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 p 元素的每个 p 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的p 元素的每个 p 元素。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 p 元素的每个p元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3

2、效果演示

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS伪类选择器</title>
    <style type="text/css">
        .div{
            width: 100px;
        }
        .div:first-of-type{
            color: red;
        }
        .div:last-of-type{
            color: blue;
        }
        .div:nth-of-type(3){
            border: 1px solid red;
        }
        .div:nth-last-of-type(2){
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <p class="p">p1</div>
    <div class="div">div1</div>
    <p class="p">p2</div>
    <div class="div">div2</div>
    <p class="p">p3</div>
    <div class="div">div3</div>
    <p class="p">p4</div>
    <div class="div">div4</div>
    <p class="p">p5</div>
    <div class="div">div5</div>
</body>
</html>

运行效果：

image.png

CSS选择器-系列文章
 下一节选择器12-:empty

weixin_33887443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择器11-first-of-type、last-of-type、nth-of-type 和 nth-last-of-type

CSS选择器-系列文章1、选择器说明选择器例子例子描述CSS:first-of-typep:first-of-type选择属于其父元素的首个 p 元素的每个 p 元素。3:last-of-typep:last-of-type选择属于其父元素的最后 p 元素的每个 p 元素...
复制链接

扫一扫