:last-of-type 无效碰到的问题：

<style>
.c:last-of-type{background:red;
}
</style>

eg 1：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<p >这是第四个段落。</p>

⬇️结果如下，背景颜色并没加上：

eg 2：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<p class='c'>这是第四个段落。</p>

⬇️给最后一行加上class=c的名字，便可以生效。

eg 3：

再将最后一个c的标签换掉，如下：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div class='c'>这是第四个段落。</div>

⬇️结果如下：

eg 4：

再将最后一行的class去掉，和eg 1对比，就是最后一行p换为div，但此时会有一行变成红色：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div>这是第四个段落。</div>

⬇️结果如下：

总结：

:last-of-type会识别标签和类名一致的最后类名的那个元素(与:last-child 区别在于，不用管是不是对于父元素的最后那个元素)。

:last-child

<style>
.c:last-child {background:#ff0000;
}
</style>

eg 1：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div class='c'>这是第四个段落。</div>

⬇️结果如下：
与:last-of-type 不同，未区分标签是否相同。

eg 2：

<p>这是第一个段落。</p>
<p class='c'>这是第二个段落。</p>
<p class='c'>这是第三个段落。</p>
<div>这是第四个段落。</div>

⬇️结果如下：
此时父元素最后一个子元素，并没有classname为c的标签，所以，都没有生效。

总结：

:last-child 并不区分标签和类名要一致才算最后一个，:last-child是只要相对父标签内最后一个标签有此类名即可生效。

:last-of-type , :last-child 无效的问题相关推荐

input type=number maxlength无效
问题:input标签type=number时maxlength属性无效解释:通过在MDN上搜索得知maxlength属性是控制value的最大长度(最多字符数目),maxlength属性对于type ...
html 图片高度无效_HTML笔记（详细）
HTML的标签分类双标签:如<strong>标签的内容</strong> 语法:<开始标签> 标签内容 </结束标签><strong>我要 ...
The XML location is ‘com/child/manager/mapper/TeacherMapper.xml‘. Cause: java.lang.IllegalArgumentEx
这个错误,我找了好久都没有找到解决方法,最后发现是因为我的TeacherMapper.xml文件内有大量重复的语句, 这是连续使用mybatis generator没有删除上一次生成的文件造成的,应该 ...
HandyJSON：Swift语言JSON转Model工具库
背景 JSON是移动端开发常用的应用层数据交换协议.最常见的场景便是,客户端向服务端发起网络请求,服务端返回JSON文本,然后客户端解析这个JSON文本,再把对应数据展现到页面上. 但在编程的时候,处 ...
Redis配置文件redis.conf文件详解
Redis配置文件redis.conf文件详解唠嗑这里面的意思只要看得差不多其实就是已经对redis有熟悉的感觉,就比如推塔已经推到别人家的大门~~~~~~~~废话不多说直接开始了知道大家都不 ...
Redis基本使用|基本命令|redis事务|Jedis|持久化|订阅|集群|
文章目录 Redis ! 一.概述二.安装三.实操 1.性能测试 2.基础知识 3.基本key命令 4.基本数据类型 1.String 2.List 3.Set 4.Hash 5.Zset 5.特 ...
【分享】“飞书自建“在集简云平台集成应用的常见问题与解决方案
一.通讯录动作常见问题 1.通讯录动作出现错误了怎么办? 如果遇到"通讯录动作"出现问题,请点击以下链接,参考[通讯录常见问题]相关文档 [通讯录常见问题]文档:开发文档 - 飞书 ...
【分享】“飞书第三方“在集简云平台集成应用的常见问题与解决方案
问:飞书(第三方应用)出现错误码了怎么办? 答:每次调用接口时,可能出现错误码.可根据错误码信息调试接口,排查错误. 错误码 code message 说明排查建议 1020001 System e ...
HTML中script标签
一.script标签中的属性 async:在script标签中添加此属性,浏览器会开启异步下载脚本(执行到当前标签后立即下载),当下载完成后立即执行,但并不会按着script在页面中的顺序来执行,而是 ...
JavaScript（learn）
@click="confirm"@confirm="confirm()"的区别 @confirm="confirm" 会有默认传参,没有ev ...

:last-of-type , :last-child 无效的问题

:last-of-type 无效碰到的问题：

eg 1：

eg 2：

eg 3：

eg 4：

总结：

:last-of-type会识别标签和类名一致的最后类名的那个元素(与:last-child 区别在于，不用管是不是对于父元素的最后那个元素)。

:last-child

eg 1：

eg 2：

总结：

:last-child 并不区分标签和类名要一致才算最后一个，:last-child是只要相对父标签内最后一个标签有此类名即可生效。

:last-of-type , :last-child 无效的问题相关推荐

最新文章

热门文章

:last-of-type , :last-child 无效的问题

:last-of-type 无效碰到的问题：

eg 1：

eg 2：

eg 3：

eg 4：

总结：

:last-of-type会识别 标签和类名 一致的最后 类名 的那个元素(与:last-child 区别在于，不用管是不是对于父元素的最后那个元素)。

:last-child

eg 1：

eg 2：

总结：

:last-child 并不区分 标签和类名 要一致才算最后一个，:last-child是只要相对父标签内最后一个标签有此类名即可生效。

:last-of-type , :last-child 无效的问题相关推荐

最新文章

热门文章

:last-of-type会识别标签和类名一致的最后类名的那个元素(与:last-child 区别在于，不用管是不是对于父元素的最后那个元素)。

:last-child 并不区分标签和类名要一致才算最后一个，:last-child是只要相对父标签内最后一个标签有此类名即可生效。