CSS - 选择第三个 DL

Question

我的标记是

<div class="gallery">
 <dl class="item">content 1</dl>
 <dl class="item">content 2</dl>
 <dl class="item">content 3</dl>

 <br style="clear: both">

 <dl class="item">content 4</dl>
 <dl class="item">content 5</dl>
 <dl class="item">content 6</dl>
</div>

现在我想选择列表中的第三个 DL。 content 3 和content 6，但此 css 仅选择 content 3 而不是 content 6。 “dl”之间的“br”使某些东西坏了。

.gallery :nth-child(3) {
    margin-right: 0;
}

有什么想法吗？

谢谢

Answer 1

改为使用 dl:nth-of-type(3n) 来排除 br:

.gallery dl:nth-of-type(3n) {
    margin-right: 0;
}

或者，使用另一个 :nth-child() 规则对之后的下一个 dl 应用间隙，并摆脱那个 br 因为不需要:

.gallery dl:nth-child(3n) {
    margin-right: 0;
}

.gallery dl:nth-child(3n+1) {
    clear: both;
}