时间戳

首页 > 解决方案 > 使用 :after 伪类来定位其他 div 下面的几个 div

css - 使用 :after 伪类来定位其他 div 下面的几个 div

问题描述

说我有这个结构

<div class="someclass">
   <div class = "someotherclass completed">
       <div class = "title">Title</div>
  </div>
</div>

completed如果上面结构中显示的 div 中存在类，我想在 Title 之后显示一些图标。

我努力了

.someclass .someotherclass.completed .title:after {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
}
<div class="someclass">
   <div class = "someotherclass completed">
       <div class = "title">Title</div>
  </div>
</div>

但这不会导致应用伪类。也许我不了解伪选择器的一些基本方面？

谢谢

编辑1：

我认为 CSS 中的其他东西正在干扰。如果我直接选择它，我只能选择具有“标题”类的元素。.title:after有效，但是通过前面的课程等进行选择是行不通的，所以我需要找出其他方法。应该有人编写一个应用程序，让您粘贴 HTML，然后输出适用于 HTML 中所选元素或类的 CSS 选择器！

编辑2：

好的，所以问题是我忽略了结构。结构其实是

<div class="someclass">
    <div class = "someotherclass completed"></div>
    <div class = "title">Title</div>
</div>

所以之前放置了一个图标：pseudo class on someotherclass。

我现在让它工作

.someclass div.someotherclass.completed + div.title:after {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
}

标签： css

解决方案

.someotherclass{
  position:relative;
}

.someclass .someotherclass.completed .title:after {
    font-family: "Font Awesome 5 Free";
    content: "\f058";
    position:absolute;
    bottom: -20px;
    left:0;
}
** To use pseudo you need to use position relative for parent and absolute for child div.

<div class="someclass">
   <div class = "someotherclass completed">
       <div class = "title">Title</div>
  </div>
</div>

推荐阅读