CSS3选择器之:last-child - Eric

真实经历

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

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

<Select

    getPopupContainer={ triggerNode => triggerNode.parentNode }

>

   <Option>{somecode...}</Option>

</Select>

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

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

.wmstool-input-group.wmstool-input-group-compact > .wmstool-select:last-child > .wmstool-select-selection {

  border-right-width: 1px;

}

界面代码大概如下：

<div class="wmstool-input-group-compact">

    <div class="wmstool-select"></div>

    <div class="wmstool-select">

        <div class="wmstool-select-selection"></div>

    </div>

    <div style=""></div>

</div>

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

实验之旅

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

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <style>

      .person p:last-child {

        color: red;

      }

    </style>

  </head>

  <body>

    <div class="person">

      <p>姓名： 小明</p>

      <p>性别： 男</p>

      <div class="intro">xxxxxxx</div>

    </div>

    <div class="person">

      <p>姓名： 小红</p>

      <p>性别： 女</p>

      <div class="intro">xxxxxxx</div>

    </div>

  </body>

</html>

结果如图：

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

<div class="person">

  <p>姓名： 小明</p>

  <div class="intro">xxxxxxx</div>

  <p>性别： 男</p>

</div>

<hr/>

<div class="person">

  <p>姓名： 小红</p>

  <p>性别： 女</p>

  <div class="intro">xxxxxxx</div>

</div>

结果如图：

总结

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

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

:last-child的坑-CSS3选择器的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  3. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  4. css3 选择器（二）

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  5. 前端必须掌握30个CSS3选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

  6. 30个CSS3选择器的应用

    或许大家平时总是在用的选择器都是: id class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选 或许大家平时总是在用的选择器都是:#id  .class ...

  7. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  8. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

随机推荐

  1. CentOS6.5升级手动安装GCC4.8.2 转载

    一.简易安装 操作环境 CentOS6.5 64bit,原版本4.4.7,不能支持C++11的特性~,希望升级到4.8.2 不能通过yum的方法升级,需要自己手动下载安装包并编译 1.1 获取安装包并 ...

  2. DVD Cloner 2019MAC如何使用？

    DVD Cloner 2019 for mac是一款应用在Mac上的DVD刻录软件,它可以将DVD克隆到任何空白光盘,包括具有多种复制模式的DVD + R / RW,DVD-R / RW,DVD + ...

  3. SQL常见面试题（学生表_课程表_总表）

    问题描述: 为管理岗位业务培训信息,建立3个表: S (S#,SN,SD,SA) S#,SN,SD,SA 分别代表学号.学员姓名.所属单位.学员年龄 C (C#,CN ) C#,CN 分别代表课程编号 ...

  4. 使用 Vulkan * API 并行渲染对象

    Vulkan API 是业界最热门的新技术之一.它们支持多线程编程,可以简化跨平台开发,而且主要的芯片.GPU 和设备制造商都为其提供支持.Vulkan API 有望成为未来主流图形渲染平台之一.该平 ...

  5. Android开发 移动端适配

    1 UI自适应(UGUI) UI自适应又分为锚点自适应和缩放.锚点主要控制UI控件在父控件之中的位置,同时也能影响缩放. 锚点自适应缩放: 我们使用UGUI创建一个界面,设计使用1920x1080分辨 ...

  6. OpenStack组件——Keystone身份认证

    1.keystone介绍 keystone 是OpenStack的组件之一,用于为OpenStack家族中的其它组件成员提供统一的认证服务,包括身份验证.令牌的发放和校验.服务列表.用户权限的定义等等 ...

  7. 【VS开发】【电子电路技术】VPX技术介绍

    VPX技术介绍 杨跃江 2009-12-18 杨跃江 13902479857 中科祥云(深圳)信息产业有限公司 1VPX 技术 新型VPX(VITA 46)标准是自从VME引入后的25年来,对于VME ...

  8. PHP xdebug 断点调试

    转载自: https://blog.csdn.net/qq_32631847/article/details/82054011

  9. sql server 查询某段日期某段时间内的数据

    如我要取8月1号到8月30号之间的早上7点半到晚上八点半这段时间内的数据. SELECT * FROM tableName AS tWHERE t.create_date BETWEEN '2017- ...

  10. 使用php过滤emoji表情

    /** * 过滤字符串中表情 * @param $str string 昵称 * @return string */ public function filterEmoji($str) { $str ...