:last-child的坑-CSS3选择器

时间 2019-12-05

标签 child css3 css 选择器栏目 CSS 繁體版

原文原文链接

CSS3选择器之:last-child - Eric

真实经历html

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

为了保证下拉框的内容随着页面滚动，antd提供了getPopupContainer属性，能够自定义下拉框的参照对象，因而本身写了以下代码：测试

<Select 
    getPopupContainer={ triggerNode => triggerNode.parentNode }
>
   <Option>{somecode...}</Option>
</Select>

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

因而排查缘由，发现以下代码不起做用：code

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

界面代码大概以下：htm

<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>

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

实验之旅ip

之前也没写过这样的代码，通常一个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>

结果如图：
get

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伪类选择器须要知足两个条件：
一、知足选择器的基本要求(.person p)
二、必须是子元素中最后一个元素

今天的分享就到这里了，有兴趣的小伙伴能够多多测试其余case！