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)},则无法div使用a标记包装标记.

因此,请考虑更改标记,并使用下面的选择器.

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

演示

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

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

如果你想坚持你的标记

(我会考虑改变)

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

演示

注意:确保将a标记包装在具有id或class唯一目标a元素的容器元素中.所以假设如果你要使用上面的解决方案,那么将内容包装在一个div带有的内容class中select_threes,所以使用下面的选择器.

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

div.highLightBoxSmall如果您仅定位a标记,则可以删除.

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

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