Question

我试图跳过每个第三个元素，1,2,4,5,7,8等...应该有9px的边距权限，每个第3个应该有一个0的边距权限所以我正在使用下面的代码没有运气！

CSS

.thumbImg:nth-child(3n + 1), .thumbImg:nth-child(3n + 2)  {margin-right:9px;}

HTML

 <a href="images/image_gallery/gallery1.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery1.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery2.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery2.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery3.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery3.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery4.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery4.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery5.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery5.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery6.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery6.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery7.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery7.jpg" class="thumbImg"></a>


  <a href="images/image_gallery/gallery8.jpg" data-lightbox="gallery"><img src="images/image_gallery/thumbs/gallery8.jpg" class="thumbImg"></a>

的jsfiddle

https://jsfiddle.net/fnc69q9m/

Answer 1

你是在错误的元素上做到的。它应该是<a>而不是<img>。

<强> Updated demo

a:nth-child(3n+1),
a:nth-child(3n+2) {
    margin-right:9px;
    border-bottom:10px red solid;
}

或

a:nth-child(3n+1) img,
a:nth-child(3n+2) img {
    margin-right:9px;
    border-bottom:10px red solid;
}

css nth-child选择器不工作

1 个答案: