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. react中setState用法

    setState()更新状态的2种写法 setState(updater, [callback]), updater为返回stateChange对象的函数: (state, props) => ...

  2. ArcEngine开发_添加字段，数据删除，插入，更新细节

    一.AE 向已存在的要素类中添加字段 链接:  AE 向已存在的要素类中添加字段 在向已存在的要素类中添加字段的时候,需要用到ICLASS接口.于是,进一步的调整代码如下,问题得以解决 static ...

  3. ctf网址，工具 汇总 组会

    @双系统装kali,专门渗透的,ubantu要自己下工具,但是娱乐性比较好 @做题 i春秋 https://www.ichunqiu.com/battalion @网站 xctf近期赛事https:/ ...

  4. 【DSP开发】【计算机视觉】TI 视觉软件开发套件ADAS

    关键字:TI  视觉软件开发套件  ADAS 日前,德州仪器 (TI) 宣布推出其视觉软件开发套件(SDK),从而为开发人员提供了一款灵活的框架.一组丰富齐全的硬件设备驱动程序和一套适用的开发工具,可 ...

  5. nginx文件路径配置(root|alias)

    nginx指定文件路径主要有两种方式:root|alias. 那么他们究竟有什么区别呢? 指令的使用方法和作用域: [root] 语法:root path 默认值:root html 配置段:http ...

  6. 将PostgreSQL数据库的表导入到elasticsearch中

    1.查看PostgreSQL表结构和数据信息 edbstore=# \d customers Table "edbstore.customers" Column | Type | ...

  7. [转帖]爬过这 6 个坡，你就能对 Linux 操作系统了如指掌

    爬过这 6 个坡,你就能对 Linux 操作系统了如指掌 http://www.51testing.com/html/16/n-4461316.html 学习的任务 任重道远 我现在处于第一阶段. 发 ...

  8. P1816忠诚

    这是一个区间查询最值的问题,用线段树来做. 建树的时候,这里不是求和,应该是e[k].w=min(e[k*2].w,e[k*2+1].w),所以这里要注意以下,其次是查询的时候,因为本题不用让我们修改 ...

  9. c++学习之对象和类——构造函数和析构函数

    再认真理一遍~ 0.类 这里先来定义一个类,便于后面的理解.参考C++ Primer Plus class Stock { private: std::string company; long sha ...

  10. Java设计模式七种写法

    懒汉模式-线程不安全 public class Singleton { private static Singleton instance; private Singleton (){ } publi ...