是否可以定位 class div 中的最后一个元素？ CSS

Question

我知道如果它们使用相同的 class 或者它们是相同的元素，我可以定位最后一个元素。 但是我正在构建的方式是用户将在其中放入任何元素（请参阅附件示例）。 只是想知道 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

是的，使用last-child和.header p:last-child将定位最后一个子元素，如果它是<p> </p>元素，并且如果您想将.header作为 ZA42F2ED4F8EB4CAB6 的 div 中的最后一个元素作为目标

您可以使用.header *:last-child在@Chris G的评论部分提到

 .header *:last-child { 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> <p>ddd</p> </div>

Answer 2

如果您只想添加color: red; 将样式设置为最后一个class='header' class 中的最后一个<p>标记，那么您应该使用CSS 选择器：

CSS：

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

您可以查看此工作代码示例。

编辑：

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

CSS：

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

检查工作代码示例。

Answer 3

尝试这个

 .header *:last-child{ 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>