CSS HTML 最后一个孩子不工作？

Question

您好，我希望类中的所有第 thirth div : highLightBoxSmall 具有 margin-right: 0;

这是我的html：

        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment1.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment1.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment1.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>
        <a href="assortimentoverzicht.html"><div class="highLightBoxSmall"> <img src="images/style/HighLightAssortiment2.png" class="highLightsImg mid" /> <span class="highLightHeader">Monitoren</span></div></a>

这是我的 CSS：

.highLightBoxSmall:nth-child(3n+3) { 
margin-right: 0; 
}

当我删除它时它确实有效，但它不起作用。

当我尝试这个时：

.highLightBoxSmall a:nth-child(3n+3) { 
margin-right: 0; 
}

或者这个

.highLightBoxSmall a:link:nth-child(3n+3) { 
margin-right: 0; 

}

一切都不起作用。

提前致谢。

Answer 1

问题是您使用了 无效标记 ^{（如果不使用 HTML5）}，您无法使用a标签..

所以考虑改变标记，并使用下面的选择器..

div.highLightBoxSmall:nth-of-type(3n) {
    background: #f00;
}

Demo

如果你想定位a，而不仅仅是在选择器末尾添加a

div.highLightBoxSmall:nth-of-type(3n) a {
    /* Styles goes here */
}

---

如果你想坚持你的标记

（我会考虑改变）

a:nth-of-type(3n) div.highLightBoxSmall {
    background: #f00;
}

Demo

注意：确保将a 标记包装在具有id 或class 的容器元素中，以唯一定位a 元素。因此，假设如果您要使用上述解决方案，请将内容包装在 div 中，例如使用 class 或 select_threes，因此请使用下面的选择器..

.select_threes a:nth-of-type(3n) div.highLightBoxSmall {
    background: #f00;
}

如果您只定位a 标记，则可以去掉div.highLightBoxSmall。

---

另外，想告诉您，您所有的选择器都不正确，在每个选择器中，您选择的是 a 标签，嵌套在具有 .highLightBoxSmall class 的元素下，但没有一个。

这里最好使用nth-of-type()而不是nth-child()