Question

如何选择下面的最后一个has-errors div？

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

我可以使用

选择第一个has-errors

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

但是last-child不起作用。如何选择.form-group.has-errors的最后一个实例？

jsfiddle

Answer 1

使用CSS，除非有一些特定的规则，否则它将是艰难的 - 就像它始终是最后的第二个。简而言之，您所要求的就像last-of-class，它不存在。有last-of-type但仅适用于元素类型（div，p等），而不适用于类。

下一个最好的选择是一些vanilla JS用.form-group.has-error类抓住最后一个元素。

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>

在这里无法回答我的问题。标题可能不准确

选择上一个嵌套元素

2 个答案: