Select 最后一个嵌套元素

Question

我如何select下面最后一个has-errorsdiv？

<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

我可以 select 第一个 has-errors 使用：

.form-block .form-group.has-errors:first-child {
  background-color: blue;
}

但是last-child上面不行。我如何 select .form-group.has-errors 的最后一个实例？

jsfiddle

Answer 1

使用 CSS 除非有一些特定的规则，否则这将很困难 - 比如它总是倒数第二个。简而言之，您要求的是 last-of-class，它不存在。有 last-of-type 但这仅适用于元素类型（div、p 等），不适用于 classes。

下一个最佳选择是一些普通的 JS 来使用 .form-group.has-error class.

获取最后一个元素

const hasErrors = document.querySelectorAll('.form-group.has-errors');
hasErrors[hasErrors.length -1].style.color = 'red';

<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

为了使其对页面上的多个表单块有用，可以将其修改为：

const formGroups = Array.from(document.querySelectorAll('.form-block'));


formGroups.forEach(function(block) {
  const hasErrors = block.querySelectorAll('.form-group.has-errors');
  hasErrors[hasErrors.length -1].style.color = 'red';
});

Form Block 1
<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

Form Block 2
<section class="form-block">
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group has-errors">
          ERROR!
    </div>
    <div class="form-group">
          stuff
    </div>
</section>

Answer 2

抱歉，我在您的代码中看不到嵌套。

嵌套元素应该这样处理

<div class="form-group">
    stuff
    <div class="form-group">
        stuff
        <div class="form-group">
              stuff
        </div>
    </div>
</div>

这里没有我的问题的答案。也许标题不准确

Select 最后一个嵌套元素

Select Last Nested Element

html

css

children

selector