为什么只有1/2的最后一个CSS类型工作

Question

我有多个div容器"页脚广告按钮"；。其中一些位于名为"的div容器中；铂"；其他在"；金"；。下面的CSS代码对我来说非常奇怪；边距底部：0"；只适用于最后一个黄金广告，但不适用于最后的白金广告。如果我停用所有黄金广告，它适用于最后白金广告。

结论：不知何故，这段代码只适用于最后一个类型的css规则中的一个(取决于哪个html是活动的(，但我看不出它为什么会这样。

CSS：

.ad .footer-ad-button{
margin-bottom: 20px;
}
.ad > div > .platinum:last-of-type > .footer-ad-button,
.ad > div > .gold:last-of-type > .footer-ad-button{
margin-bottom: 0;
}

HTML:

<div class="ad"> 
<div class="row">
<div class="platinum">
<div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
<div class="advertise-inner"></div>
</div>
</div>  
<div class="platinum">
<div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
<div class="advertise-inner"></div>
</div>
</div>  

<div class="gold">
<div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
<div class="advertise-inner"></div>
</div>
</div> 
<div class="gold">
<div aria-label="Advertisement" class="footer-ad-button" onclick="location.href = '/'">
<div class="advertise-inner"></div>
</div>
</div> 
</div>
</div>

Answer 1

last-of-type选择具有该类型的最后一个元素(不是类，不是id(，因此，当您期望.platinum:last-of-type选择具有类platinum的最后一个子元素(不一定是该类型的最终元素(时，它选择的是具有platinum类的元素，并且是其父元素中具有该类的最后一子元素。在您的情况下，该类型是<div>，但也可以是<section>或其他类型。

目前，CSS规范并没有定义这样一个选择器来实现您的目标，因此您需要引入一些javascript来动态选择您想要的元素。