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. vim编辑器详解(week1_day3)

    vi编辑器   作用:编辑文本文件中的内容的工具   命令历史   末行模式中,以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令.   启动vim   在命令行窗口中 ...

  2. 目前最新u盘启动快捷热键一览表

    现在重装系统已不再是件难事了,一个普通的u盘就可以帮你搞定,但是对于一些新手来说在使用u盘启动盘安装系统是也许会遇到这样的小问题,面对一台新电脑时不知道该如何让电脑优先访问u盘从而进入PE系统下进行装 ...

  3. USACO4.4 Frame Up【拓扑排序】

    题意居然还读了好久... 读完题目之后大概就知道拓扑排序了.用拓扑可以求出一些字母之间的关系,谁先,谁后.但是这个关系不是唯一确定的,所以就会产生多种方案(题目还要求按字典序输出所有的方案) 输出方案 ...

  4. 【VS开发】PCIe体系结构的组成部件

    PCIe总线作为处理器系统的局部总线,其作用与PCI总线类似,主要目的是为了连接处理器系统中的外部设备,当然PCIe总线也可以连接其他处理器系统.在不同的处理器系统中,PCIe体系结构的实现方法略有不 ...

  5. 动态赋予java类的属性set与get值

    public class Contact { private String name; private String tel; private attrControl attrC=new attrCo ...

  6. Smarty内置函数之config_load

    config_load的作用是: 用于从配置文件中加载变量,属性file引入配置文件名,另外若配置文件包含多个部分,可以使用属性section指定从那部分取得变量(若不指定,将会引入失败). 实例: ...

  7. 06: zabbix常见面试题

    1.1 zabbix架构 1.zabbix理论 1)Zabbix是一个企业级的.开源的.分布式的监控套件,Zabbix可以监控网络和服务的监控状况. 2)Zabbix利用灵活的告警机制,允许用户对事件 ...

  8. Dango之视图函数

    1.request对象 HTTPRequest对象就是咱们的视图函数的参数request def home(request): print(request) #<WSGIRequest: GET ...

  9. CentOS 7 防火墙常用操作及常见问题处理

    一.常用操作 1.启动防火墙: systemctl start firewalld.service 2.关闭防火墙: systemctl stop firewalld.service 3.添加放行端口 ...

  10. Postman之简单使用

    前提:已获得接口文档 / 抓包数据 1.启动Postman 直接在这个页面输入数据(不用管其他的地方!!!) 2.按照接口文档填入 注意蓝色框中的数据 请求方式:POST(几乎都是使用POST/GET ...