是否可以定位类 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;样式添加到最后一个class='header'类中的最后一个<p>标签，那么您应该使用CSS 选择器：

.CSS：

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

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

编辑：

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

.CSS：

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

检查工作代码示例。

Answer 2

是的，如果它是<p> </p>元素，并且如果您想将.headerdiv 中的最后一个元素作为类作为类，则last-child和.header p:last-child将针对最后一个子元素。

您可以使用.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 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>