Question

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

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

由于没有nth-of-class选择器

，因此CSS无法实现这一点

使用Jquery，它具有.last函数的简单性。

＆＃13;

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

＆＃13;

.total.highlight {
  color: red;
}

＆＃13;

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

＆＃13;

Answer 2

不幸的是，纯CSS不可能，所以你需要一点JavaScript。

＆＃13;

var elems = document.querySelectorAll('.total');

if (elems.length) {
  elems[elems.length - 1].className += ' total-last'
}

＆＃13;

.total {
  background: yellow;
}

.total-last {
  background: red;
}

＆＃13;

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

＆＃13;

不要忘记将您的脚本放在HTML元素之后，或者在DOMReady之后执行它。

选择绝对最后一个元素

2 个答案: