时间戳

首页 > 解决方案 > CSS Last Child 不适用于嵌套 Div？

html - CSS Last Child 不适用于嵌套 Div？

问题描述

我正在使用 Bootstrap 在我的个人网站上工作，特别是在我的简历部分，我正在为我的经历创建一个垂直时间线。

对于每个部分的最后一次体验，我希望使用:last-child选择器缩短行以反映该部分体验的结束。但是，我在使用嵌套 div 时遇到了问题。

出于某种原因，我的 CSS 只为 each选择绝对最后一个实例section-item而不是最后一个实例。section-itemsection-col

这是我的 HTML 片段：

<div class = "container h-100 contact-form">
  <h2>Resume</h2>          
  <div class = "row justify-content-center">
    <div class = "col-md-6">
      <div class = "section-col"></div>
      <h4>Education</h4>
      <br>
      <div class = "section-item">
         <h5>School Name Here</h5>
         <h6>Degree Here</h6>
         <p>Location | Class of</p>
      </div>
      <div class = "section-item">
         <h5>Second School Name</h5>
         <h6>2nd School Name Location</h6>
         <p>Graduation</p>
      </div>
      <br>
    </div>
    <div class = "section-col">
      <h4 class = "section-name">Professional Experience</h4>
      <br>
      <div class = "section-item">
        <h5>Company</h5>
        <h6>Position</h6>
        <p>June 2020 - August 2020</p>
      </div>
      <div class = "section-item">
        <h5>Other company</h5>
        <h6>Position</h6>
        <p>June 2020 - July 2020</p>
      </div><br>
    </div>
  </div>

这是我的 CSS 尝试：（第一个块代码是生成线条，最后一个是圆圈）

.section-item {
    border-left: 2px solid grey;
    padding-left: 15px;
    margin-left: 5px;
    height: 120px;
    
}

.section-item > h5{
    line-height: 80%;
}

.section-col .section-item:last-child {
    height: 70px; 
}

.section-item:before{
    content: " ";
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    background: #fff;
    border: 3px solid black;
    width: 15px;
    height: 15px;
    left: 14px;
    right: 0;
   
}

这是显示我的问题的图像：

这是显示我的问题的图像

如果有人对此有任何想法，任何输入将不胜感激，谢谢！

标签： htmlcssbootstrap-4

解决方案

你:last-child里面的每一个.section-col都是一个<br>元素。所以选择器.section-col .section-item:last-child不匹配任何元素，没有效果。

你有三个选择：

  1. 使用:last-of-type代替:last-child
  2. 彻底<br>抛弃
  3. 将 s包装成.section-item一个新的<div>并在:last-child那里解决

推荐阅读