last-of-type选择器

最新推荐文章于 2024-08-18 12:59:56 发布
最新推荐文章于 2024-08-18 12:59:56 发布
阅读量656 收藏
点赞数

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

示例演示

通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色

（提示：这个段落不是“div.wrapper”容器的最后一个子元素）。

HTML代码：

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <div>我是第三个Div元素</div>
</div>


CSS代码：

 .wrapper > p:last-of-type{
  background: orange;
}


演示结果：

 <!DOCTYPE www.dztcsd.comhtml>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
  <div>我是第一个Div元素</div>
  <div>我是第二个Div元素</div>
  <div>我是第三个Div元素</div>
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
</div>
</body>
</html>

任务

在右边CSS编辑器中的第1行输入正确的代码，将容器“div.wrapper”中最后一个Div元素背景设置为橙色。

大志天成119
关注
:last-child和:last-type-of
栗子的成长ing
12-26 1574
一.last-child 遇到使用:last-child无效的情况，主要是样式写的不对。 el:last-child 的匹配规则是： 查找 el 选择器匹配元素的所有同级元素（siblings）。 在同级元素中查找最后一个元素。 检验最后一个元素是否与选择器 el 匹配。 1. 错误示例 <div class = "content"> <div cla...
css3 last-of-type选择器
weixin_39093202的博客
01-10 798
“:last-of-type”选择器和“:first-of-type”选择器功能是一样的， 不同的是他选择是父元素下的某个类型的最后一个子元素。 示例演示 通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色 （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。 HTML代码： &lt;div class="wr...
CSS 选择器 :last-child与:last-of-type的区别
包磊磊的博客
08-20 2272
:last-child----represents the last element among a group of sibling elements. CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。 举个例子： 从代码和图可以看出:last-child选择了最后一个li标签。 同时，我们换另外一段代码，看看是否还有这样的效果。 从代码和图可以看出，:last-child并没有起到我们想要的作用。如果，这个时候去掉最后的di
CSS的:last-of-type伪类：精准定位末尾元素的样式秘诀
最新发布
2402_85761468的博客
08-18 677
在CSS中，伪类是一种强大的工具，它允许我们根据文档的上下文关系选择元素，而不仅仅是它们的类型或类名。伪类是这些工具中的一个，它可以用来选择一个父元素中最后一种特定类型的子元素。这种能力在设计复杂的布局时非常有用，比如在列表、表格或嵌套元素中添加特定的样式。
CSS3---last-of-type选择器
diyinjiao1404的博客
05-04 147
last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。 示例演示 通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色 （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。 HTML代...
CSS :last-of-type 选择器
lengqingIT的博客
03-25 545
HTML 用法 <body> <h1>:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素</h1> <h3>实例:指定其父级的最后一个p元素的背景色</h3> <p>www.semi-warm.com</p> <p>www.semi-warm.com</p> &lt...
:last-of-type | CSS属性参考
初晴
09-19 1180
CSS :last-of-type伪类选择器用于匹配属于其父元素的特定类型的最后一个子元素的每个元素。 换句话来说，:last-of-type伪类选择器匹配父元素中最后一次出现的某类子元素，例如： article>   h1>标题h1>   p>     第一个段落...   p>   p>     第二个段落...
伪类（:first-of-type）与类选择器(.class)连用失效
m0_53016870的博客
03-25 3219
前几天上课，老师在讲解伪类选择器的时候遇到了伪类（:first-of-type）与类选择器(.class)连用失效的问题。 今天来记录一下自己的理解： 结构伪类(部分)： :first-of-type 表示选择相同类型元素的第一个 :last-of-type 表示选择相同类型元素的最后一个 :nth-of-type(n) 表示选择相同类型元素的第n个 以上三个选择器都是先进行匹配，再排序 首先，使用标签选择器与伪类连用 代码如下： <!DOCTYPE html> &lt
CSS选择器大全包含nth-child和nth-of-type的区别
dany的博客
08-16 726
详解nth-child和nth-of-type的区别和用法，简单易懂，包含基本选择器以及特殊选择器的解释以及用法
CSS中的nth-child和nth-of-type选择器
osbron_J的博客
11-13 832
CSS中的nth-XXX选择器 我们知道，在CSS中，选择相同类名，相同标签的子级元素或者兄弟元素都很快捷方便，但是如果要有目的性的去筛选一些子级或者同级元素，那么，就要用到这里所说的选择器 nth-child和nth-last-child 这个选择器可以选择同级的一类标签，或者类。 根据一些数学规则: an+b:代表匹配父容器下面中第an+b个子元素，a，b都可以为0 比如： <head&...
CSS3伪类选择器nth-child和nth-of-type浅析
perhapschen的博客
05-19 2769
1. nth-child 定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 n 个子元素，不论元素的类型。n 可以是数字、关键词或公式。 ① n为数字时，n为大于0的整数 .box :nth-child(1){background-color: red;} &lt;div class="box"&gt; &lt;div&gt;1-1&lt;/div&...
CSS 选择器 :last-child与:last-of-type的区别
weixin_34337381的博客
03-01 190
:last-child----represents the last element among a group of sibling elements. CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。 举个例子： 从代码和图可以看出:last-child选择了最后一个li标签。 同时，我们换另外一段代码，看看是否还有这样的效果。   ...
:last-of-type , :last-child 无效的问题
BigOrange的博客
07-09 8184
:last-of-type 无效碰到的问题： <style> .c:last-of-type{ background:red; } </style> eg 1： <p>这是第一个段落。</p> <p class='c'>这是第二个段落。</p> <p class='c'>这是第三个段落。</p> ...
最后一个 last-of-type
diebaiying3731的博客
04-28 93
last-of-type这个比较好点，有时候:last-child 不起作用 转载于:https://www.cnblogs.com/huanghuali/p/8966537.html
重学last-of-type
supming1的专栏
04-14 230
一直以为last-of-type是找某个类型的最后一个节点，一直以为css类也是支持的。今天遇到类似下面结构，写成 .p:last-of-type找不到最后一个p，写成 p:last-of-type 就能正确找到。查了下资料，选择器先根据.p 找到对应的元素，然后根据对应元素的标签（p）开始找同类型（p）的兄弟节点，如果这个元素是兄弟中的最后一个，那成立，否则不成立。如下结构，找到的是内容为“这...
关于:last-child 和 :last-of-type 的区别
m0_47230916的博客
01-22 2405
之前一直没有着重区分:last-child 和 :last-of-type 这两个选择器,今天就区分一下 :last-child这个css选择器是选择父元素中最后的子元素 运行结果： 显然是没有出来效果 运行结果： 效果生效 由此得出结论： :last-child是选择父元素 div.box中的最后一个子元素，但是为什么没有出效果呢？就是div.box中最后一个子元素是div元素，而又使用指向最后一个p,（也就是说我想找的是最后一个子元素并且是p的元素，但是这里最后..
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:last-of-type 伪类
杭州.黄老师
04-09 786
小程序中的WXSS(css)选择器课程-伪类-:last-of-type 伪类 定义和用法 :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 提示：等同于 :nth-last-of-type(1)。 浏览器支持 所有主流浏览器均支持 :last-of-type 选择器，除了 IE8 及更早的版本。 实例 指定父元素的最后一个 p 元素的背景色： &amp;lt;!...
css选择器——:first/last-of-type
Jener
08-11 656
之前介绍了，兄弟同级选择器——:nith-of-type，现在咱们继续了解下针对父级的选择器first-of-type，last-of-type。 测试代码块 p:first-of-type{ color:#ff0000; } p:last-of-type{ color: #ff00ff; } 以body为直接父级
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-last-of-type()伪类
杭州.黄老师
04-03 977
小程序中的WXSS(css)选择器课程-伪类-:nth-last-of-type()伪类 定义和用法 :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。 n 可以是数字、关键词或公式。 提示：请参阅 :nth-last-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关，从最后一个子元素开始计数。...
CSS3.0金矿：深入理解:first、:last与:nth-of-type选择器
在这个例子中，作者使用了`.block`类选择器，并展示了`:nth-of-type(3n+1)`伪类选择器的用法。`:first-of-type`伪类用于选取其父元素中第一个具有特定类型的子元素，而`:last-of-type`则相反，选取最后一个。这里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值