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

【问题标题】：Using :after pseudo class to target child several divs below some other div使用 :after 伪类来定位其他 div 下面的几个 div
【发布时间】：2019-11-28 17:37:21
【问题描述】：

假设我有这个结构

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

如果上面结构中显示的 div 中存在类 completed，我想在 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>

所以之前放置了一个图标：someotherclass 上的伪类。

我现在有它的工作原理

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

【问题讨论】：

请出示正确的minimal reproducible example 来说明您的问题。当前显示的代码没有，jsfiddle.net/ew7kycg5（它当然不会在没有显式嵌入的情况下呈现字体，但至少在单词 Title 之后会显示额外的字符。）
如果我们考虑到您正确导入字体真棒 CSS 的事实，您的代码可以正常工作

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为分配的字体系列中存在一些错误，请使用“字体系列：FontAwesome”检查它。下面的代码将解决这个问题：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel="stylesheet"/>
<style>
.someclass .someotherclass.completed .title:after {
    font-family: "FontAwesome";
    content: "\f058";
}
</style>
</head>
<body>

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

</body>
</html>

有另一种方法可以解决此问题，如下所示：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel="stylesheet"/>
<style>
 i {
 font-family:'FontAwesome'}
</style>
</head>
<body>

<div class="someclass">
   <div class = "someotherclass completed">
       <div class="title">Title<i class="fa-check-circle"></i></div>

  </div>
</div>

</body>
</html>

【讨论】：

谢谢，我刚刚意识到我错误地评估了布局，现在一切正常。哇，这种工作需要对细节的疯狂关注！
@Brian 如果你还活着并活跃在这个很棒的网络中，请更新，因为我需要你的答案或更新的答案。