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个元素，我希望第margin-right行的第4个元素为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 =“第四项”，然后执行：

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

CSS最后一行元素样式

3 个答案: