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. HTML Img标签 src为网络地址无法显示图片问题解决（https）

    举例说明: <img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载 ...

  2. HTTP及WEB框架简述

    HTTP介绍 Hyper Text Transfer Protocol,超文本传输书协议,是万维网数据通信的基础,规定了请求和响应标准. HTTP工作原理 HTTP 请求以及响应的步骤 客户端连接到W ...

  3. windows server 2008 R2 怎么集成USB3.0驱动

    DELL最新出的T130.T330.R230.R330四款服务器新增了USB3.0功能,在安装2008 R2系统镜像需要集成USB3.0才能安装,不然鼠标和键盘动不了 先在D盘创建一个文件夹Temp, ...

  4. logstash 处理信息规律研究

    1.input file path => "/opt/50910627.log" path => "/path/to/%{+yyyy/MM/dd/hh}.lo ...

  5. Akka入门

    原文:http://doc.akka.io/docs/akka/2.3.6/intro/getting-started.html 预备知识 AKKA要求你的计算机已经安装了Java1.6或更高版本. ...

  6. [HAOI2016]字符合并

    Luogu3736 很容易想到直接DP,关键是枚举顺序. \(1.\)设后一段构成最后一个点,前一段构成前面的点,那么能得到\(1\)个点的数量要求 : \(1,k,2k-1...\)相差\(k-1\ ...

  7. Oracle 即时客户点下载以及简单连接数据库的方法

    1. 下载方法 百度 oracle client 第一个即可 2. 下载地址为: https://www.oracle.com/database/technologies/instant-client ...

  8. spring简单crud配置文件说明

    字体设置:代码  14px 文字 幼圆 15px 1.在pom.xml下导入依赖包 (1)Spring四个核心依赖包 <dependency> <groupId>org.spr ...

  9. GitHub从小白到熟悉<二>

    创建 仓库  

  10. springboot读取配置不存在报错

    @Value("${log.regId}")private String regId = "123123"; String regId = env.getPro ...