0

我有一个在 WP 中使用简码导入的幻灯片。

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

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

.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>
4

4 回答 4

2

你的ngg-gallery-thumbnail元素都是他们各自父母的单身孩子，所以选择器从不选择任何东西。您应该基于具有 class 的元素进行选择ngg-gallery-thumbnail-box，它们都是兄弟姐妹：

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

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

于 2013-09-06T13:49:13.783 回答
1

这个：

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

小提琴

于 2013-09-06T14:04:18.077 回答
0

尝试

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

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

于 2013-09-06T13:48:54.093 回答
0

您需要将 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 个元素等。

于 2013-09-06T14:13:50.063 回答