css - 选择绝对最后一个元素

Question

我正在尝试选择具有类的绝对最后一个元素。这可以嵌套在很多元素中，它可以是页面上某处的自己的元素，它可以在任何地方。这是我尝试过的:

https://jsfiddle.net/cztpog87/

HTML:

<div>
    <div class="total">
        Money!
    </div>
    <div>
        <div class="total">
            Money!
        </div>
    </div>
    <div class="total">
        Money!
    </div>
</div>
<div>
    <div class="total">
        Money!
    </div>
    <div>
        <div class="total">
            Money!
        </div>
    </div>
    <div class="total">
        Money!
    </div>
    <div class="total">
        Money!
    </div>
</div>

CSS:

.total:not(:last-of-type) {
    display: none;
}

.total:not(:last-child) {
    display: none;
}

如您所见，它并没有删除所有元素。它删除了一些但绝对不是全部。除了最后一个之外，删除所有的绝对最佳方法是什么？也欢迎使用 SASS。

Answer 1

很简单，这对于 CSS 是不可能的，因为没有 nth-of-class 选择器

对于 Jquery，.last 函数本身就很简单。

$(".total").last().addClass("highlight");

.total.highlight {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="total">
    Money!
  </div>
  <div>
    <div class="total">
      Money!
    </div>
  </div>
  <div class="total">
    Money!
  </div>
</div>
<div>
  <div class="total">
    Money!
  </div>
  <div>
    <div class="total">
      Money!
    </div>
  </div>
  <div class="total">
    Money!
  </div>
  <div class="total">
    Money!
  </div>
</div>