javascript - 是否可以将类 div 中的最后一个元素作为目标？ CSS

Question

我知道如果它们使用相同的类或者它们是相同的元素，我可以定位最后一个元素。但是我正在构建的方式是用户将在其中放入任何元素(请参阅附加示例)。只是想知道是否仍然可以通过 CSS 调用？或者这将是 CSS 无法完成的事情？

.header p:last-of-type{
  color: red;
 }

<div class="header">
  <h1>I am numbe one</h1>
  <h3>number two</h3>
  <p>something</p>
  <p>something</p>
  <button>last one - red</button>
</div>

<div class="header">
  <h1>I am numbe one</h1>
  <h3>number two</h3>
  <p>last one - red</p>
</div>

<div class="header">
  <p>number 1</p>
  <h1>something</h1>
  <h3>last one - red</h3>
</div>

Answer 1

如果您只想添加 color: red;造型到最后<p>最后一个标签里面 class='header'类，那么你应该使用 <强> CSS Selectors :

CSS:

.header:last-of-type p:last-of-type {
    color: red;
}

你可以查看这个 working code sample 。

编辑:

如果你想用 class='header' 定位每个标签的最后一个元素，你可以像这样完成它:

CSS:

.header *:last-child {
  color: red;
}

检查 working code sample .