html - CSS最后一行元素样式

Question

<div class="archyvas-virselis">
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>
    <a href="#"><img src="./img/virselis-archyvas.jpg" alt=""/></a>

</div>

例如，在 1 行中有 4 个元素，我希望行的第 4 个元素margin-right是0，可以写那种样式吗？

Answer 1

  .archyvas-virselis a:nth-child(4n+4){ margin-right: 0}

每 4 个元素

或者

 .archyvas-virselis a:nth-child(4){ margin-right: 0 }

仅适用于 4 元素

请记住它仅适用于 ie9 及更高版本

Answer 2

我会去

a:nth-child(4n+4){
    margin-right:0;
}

基于您可能希望第 4 个是右边距，但一行中可能有 4 个以上的元素（根据您的 HTML）

这是一个 css3 选择器，可能不适用于旧版浏览器 (IE)

Answer 3

Jquery 是不修改 HTML 的唯一方法。你可以像这样实现它：

    jQuery('.archyvas-virselis a:nth-child(4n)').addClass('fourth-item');

并为类第四项定义样式

但假设你能做到这一点，主要的选择就是给它一个class="fourth-item"，然后做：

a.fourth-item { /* ... */ }