CSS：选择具有特定类的最后一个 div [重复]答案

【问题标题】：CSS: select last div with specific class [duplicate]CSS：选择具有特定类的最后一个 div [重复]
【发布时间】：2020-01-21 07:44:38
【问题描述】：

<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

如何选择最后一个div 和class="custom"？我必须使用 text3 将 border-bottom 添加到 div。我试过了：

.class1 .custom:last-of-type {
  border-bottom: 1px solid;
}

...但是随后border-bottom 被添加到所有带有class="custom" 的div 中。我只需要 CSS 解决方案，不需要 JS。也可能有任意数量的<li>，所以我不能使用:nth-child()。

更新：此布局由 Prime NG 组件<p-autocomplete> 生成代码是：

<p-autocomplete ....>
  <ng-template let-item pTemplate="item">
    <div [ngClass]="{'custom'}: item.isCustom">
      {{item.name}}
    </div>
  </ng-template>
</p-autocomplete>

【问题讨论】：

@04FS 因为自定义 div 不是兄弟姐妹，所以不是重复的。
目前没有办法单独使用 css 来做到这一点，您可能需要使用服务器端语言来做到这一点 - （我猜这就是应用自定义类的原因）
什么是应用自定义类？
嗯，那可能是角度大师的一个 - 在你的 js 代码中，我会为最后一项 isCustom 应用一个额外的类（或添加一个属性，以便你可以在你的 ngClass 语句中应用它）
@Pete，那好吧。主要问题是是否可以仅使用 CSS。所以我会尝试用js来做。

标签： html css angular css-selectors primeng

【解决方案1】：

我同意 cmets 的说法，即不存在纯 CSS 解决方案，因为无法聚合像 :last-of-type 这样的特殊选择器，例如 (.class1 .custom):last-of-type（不起作用）。

我建议的是一个简单的 JQuery 解决方案：

$(".class1 .custom").last().parents(".class1").addClass("custom2");

.custom2{
   border-bottom: 1px solid;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

【讨论】：

【解决方案2】：

我对此并不感到自豪，但它只是 CSS 并且有效。

.class1 .custom {
  border-bottom: 1px solid;
  position: relative;
}

.class1 .custom::before {
  display: block;
  content: '';
  position: absolute;
  border-top: 1px solid white;
  width: 100%;
  top: -1px;
}

<ul>
  <li class="class1">
    <div class="custom">text1</div>
  </li>
  <li class="class1">
    <div class="custom">text2</div>
  </li>
  <li class="class1">
    <div class="custom">text3</div>
  </li>
  <li class="class1">
    <div>text4</div>
  </li>
  <li class="class1">
    <div>text5</div>
  </li>
</ul>

【讨论】：