Question

我有一个幻灯片，在WP中使用短代码导入。

我正在尝试将自定义css添加到显示的每个第4张图片中，但没有运气。

任何帮助都会很棒，谢谢。

.thumb-res .ngg-gallery-thumbnail:nth-child(4) img { border: 1px solid #000 !important; }

HTML：

<div class="thumb-res">
<div class="ngg-galleryoverview" id="ngg-gallery-97131261c1bb7b3c15f04e8ef0f97c77-1">
<div class="slideshowlink">
  <a href='url'>[Show as slideshow]</a>
</div>
<div id="ngg-image-0" class="ngg-gallery-thumbnail-box">
  <div class="ngg-gallery-thumbnail">
    <a href="url" title=" " data-image-id='48' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
      <img title="slide4" alt="slide4" src="url" width="174" height="150" style="max-width:none;"/>
    </a>
  </div>
</div>
<div id="ngg-image-1" class="ngg-gallery-thumbnail-box">
  <div class="ngg-gallery-thumbnail">
    <a href="url" title=" " data-image-id='46' class="ngg-fancybox" rel="97131261c1bb7b3c15f04e8ef0f97c77">
      <img title="slide2" alt="slide2" src="url" width="174" height="150" style="max-width:none;"/>
    </a>
  </div>
</div>

Answer 1

您的ngg-gallery-thumbnail元素都是其各自父母的单个子元素，因此选择器从不选择任何内容。您应该根据类ngg-gallery-thumbnail-box的元素进行选择，这些元素都是兄弟姐妹：

.thumb-res .ngg-gallery-thumbnail-box:nth-child(4) img { ... }

也就是说，这仍然无法完全按预期工作，因为看起来也有兄弟姐妹不是缩略图框。

Answer 2

此：

$(".thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1)").addClass("fourth");

FIDDLE

Answer 3

尝试

.thumb-res .ngg-gallery-thumbnail-**box**:nth-child(**4n**) img { 
    border: 1px solid #000 !important; 
}

使用您的代码，您只选择第4张图片。每4个你需要4n：D

Answer 4

你需要使用nth-child（an + b）作为直接兄弟姐妹。

.thumb-res .ngg-gallery-thumbnail-box:nth-child(4n+1) img { border: 1px solid #000 !important; }

另外，为了向每个显示的第4个图像添加自定义css，您需要使用格式为“an + b”的参数。例如4n + 1选择第4，第8，第12个元素等。

CSS nth with image

4 个答案: