前端常见bug系列2::last-of-type 和 :first-of-type的误用

简介: [上一篇](http://www.atatech.org/articles/64244)中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个。那么,怎么达到这个效果呢?对,可以用:last-of-type。来个例子试试看吧! ``` .section{ margin-bot

上一篇中曾提到,someselecttor:last-chid 所表示的并不是someselecttor选中的节点集合的最后一个。那么,怎么达到这个效果呢?对,可以用:last-of-type。来个例子试试看吧!

<style>
        .section{
            margin-bottom: 50px;
        }

        .section1-item:last-of-type{
            color: green;
        }
</style>
AI 代码解读
<section class="section section1">
    <header>header</header>
    <p class="section1-item">111</p>
    <p class="section1-item">222</p>
    <p class="section1-item">333</p>
    <p class="section1-item">444</p>
    <footer>footer</footer>
</section>
AI 代码解读

果然,把<p class="section1-item">444</p>给加上了绿色。不过,当我们把上面代码片段中的<footer>footer</footer>也加上 class="section1-item",问题来了,居然给<p class="section1-item">444</p><footer class="section1-item">footer</footer>所标示的两个元素都给加上了绿色!

我们继续把上面的HTML代码片段进行修改,改成:

<section class="section section1">
    <header>header</header>
    <p class="section1-item">111</p>
    <p class="section1-item">222</p>
    <p class="section1-item">333</p>
    <footer class="section1-item">444</footer>
    <footer class="section1-item">footer</footer>
</section>
AI 代码解读

即只是把<p class="section1-item">444</p>改成了<footer class="section1-item">444</footer>,而CSS样式不作修改。当再次预览效果的时候,发现被加上绿色的元素分别是<p class="section1-item">333</p><footer class="section1-item">footer</footer>。这下答案就很明显了:

someselector:last-of-type不仅与someselector这个选择器相关,还与符合该选择器的元素的标签相关。

再看一下W3C的说明

The :last-of-type pseudo-class represents an element that is the last sibling of its type in the list of children of its parent element.

这里所谓 the last sibling of its type其实讲得并不是很清楚,但仔细琢磨,这里的type的意思应该就是不仅仅与选择器相关,还与标签相关。

这时,你可能已经想到了,:first-of-type肯定也有类似的问题。的确,如你所料。

有了这一篇和上一篇的经验,遇到那不太准的CSS选择器,先进行如下处理:

1、翻一下W3C的说明

2、试验一下

pai_an
+关注
目录
打赏
0
0
0
0
16
分享
相关文章
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
189 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
352 1
如何区分是前端BUG还是后端BUG
1 基于经验 前端BUG特点: (1)界面排版、布局错误、兼容性问题 (2)网络不稳定导致JS或CSS未完全加载或请求超时(一般不需要提BUG),正常网络下加载超时 后端BUG特点: 业务逻辑、性能问题、数据问题、安全性问题 2 通过HTTP请求和响应信息 可以通过浏览器开发者工具(F12)、postman、fiddler(移动端可通过该工具抓包)、Charles、Proxyman、Wireshark、HttpCanary、tcpdump等工具。
148 1
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
elementui-upload组件自定义样式上传(upload中常用的属性,但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成
1460 0
编写代码前,如何规避尽可能多的前端bug?
编写代码前,如何规避尽可能多的前端bug?
109 0
前端Vue小项目的一个非常诡异离谱的"眼神不好"Bug
公司放假, 现在来提升自己的前端的技术, 想着使用饿了么UI搭建一个简单的页面, 并完成mock数据的获取, 一个小项目就好了....
124 0
【芯片前端】“异步FIFO全解析”的BUG——格雷码连续性
【芯片前端】“异步FIFO全解析”的BUG——格雷码连续性
199 1
测试大姐趁我下班点又提了个bug!前端你咋多个options请求?
测试大姐趁我下班点又提了个bug!前端你咋多个options请求?
115 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问