:last-child的坑-CSS3选择器

ccj659 发布于2019-08-02 11:54 / 3085人阅读

摘要：选择器之真实经历最近开发项目的时候发现了一个这么多年忽略的问题，和大家分享一下。

CSS3选择器之:last-child - Eric

真实经历

最近开发项目的时候发现了一个这么多年忽略的问题，和大家分享一下。
项目使用的是Antd组件库，有一个搜索框是这样的：

为了保证下拉框的内容随着页面滚动，antd提供了getPopupContainer属性，可以自定义下拉框的参照对象，于是自己写了如下代码：

这样写了之后发现右边的边框没有了，如图

于是排查原因，发现如下代码不起作用：

.wmstool-input-group.wmstool-input-group-compact > .wmstool-select:last-child > .wmstool-select-selection {
  border-right-width: 1px;
}

界面代码大概如下：

小伙伴们思考一下，样式会起作用吗？

实验之旅

以前也没写过这样的代码，一般一个div中包含的都是同类型的，自己就开始测试起来，代码如下：



  
    
    
  
  
    
      姓名： 小明
      性别： 男
      xxxxxxx
    
    
      姓名： 小红
      性别： 女
      xxxxxxx

结果如图：

What!，说好的class为person中最后一个p标签会变红的呢，接下来我们再实验，代码如下：


  姓名： 小明
  xxxxxxx
  性别： 男



  姓名： 小红
  性别： 女
  xxxxxxx

结果如图：

总结

从两次实验我们可以看出，:last-child伪类选择器需要满足两个条件：
1、满足选择器的基本要求(.person p)
2、必须是子元素中最后一个元素

今天的分享就到这里了，有兴趣的小伙伴可以多多测试其他case！

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53200.html

:last-child的坑-CSS3选择器

摘要：选择器之真实经历最近开发项目的时候发现了一个这么多年忽略的问题，和大家分享一下。 CSS3选择器之:last-child - Eric 真实经历最近开发项目的时候发现了一个这么多年忽略的问题，和大家分享一下。项目使用的是Antd组件库，有一个搜索框是这样的：showImg(https://segmentfault.com/img/bVbi1UZ?w=380&h=52); 为了保证下...

13651657101 2019-08-29 17:09 评论0 收藏0
小程序/uniapp支持的css选择器一览

摘要：本次测试主要参考文档为选择器参考手册主要是安卓微信小程序的选择器兼容入坑小程序过程中看到微信对支持的选择器的描述只有六个分别是但是看到给写的花里胡哨的的库还有各种花里胡哨的小程序并且还表明支持之前各种无的库所以我觉得事情并没有这么简单趁着元本次测试主要参考文档为w3school CSS 选择器参考手册 (主要是安卓/ios/微信小程序的css选择器兼容) 入坑uniapp/小程序过...

MockingBird 2019-08-30 15:55 评论0 收藏0
常用css3选择器

摘要：模糊匹配属性选择器标题选择器匹配属性值以标题指定值开头的每个元素。选择器用来匹配父元素中最后一个子元素。和和是可用于匹配下标是奇数或偶数的子元素的关键词选择器匹配同类型中的倒数第个同级兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

ytwman 2019-08-29 12:48 评论0 收藏0
常用css3选择器

摘要：模糊匹配属性选择器标题选择器匹配属性值以标题指定值开头的每个元素。选择器用来匹配父元素中最后一个子元素。和和是可用于匹配下标是奇数或偶数的子元素的关键词选择器匹配同类型中的倒数第个同级兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

Cheng_Gang 2019-08-01 17:01 评论0 收藏0