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 元素。

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

相关文章
|
20天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
116 44
|
12天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
11 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
20天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
16 4
|
10天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
16天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
15 0
|
16天前
|
前端开发
CSS2(一):CSS选择器(2)
CSS2(一):CSS选择器(2)
10 0
|
16天前
|
前端开发
CSS2(一):CSS选择器(1)
CSS2(一):CSS选择器(1)
11 0
|
21天前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示
10 0
|
21天前
|
前端开发 开发者
CSS 选择器与相关规则详解
CSS 选择器与相关规则详解
13 0
|
22天前
|
前端开发
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
技术经验分享:CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
11 0