我怎样才选择.class-a：nth-​​child只有当它也有类.class-b

Question

我有一个图像网格。在这个网格中我有专辑。相册显示为单个图像（图像 - 相册 - 封面），直到它们被展开，之后整个相册将显示在其余图像（图像 - 相册 - 图像）中。

图像 - 专辑封面和图像 - 专辑 - 图像都具有类images-image-col。 images-image-col也是非专辑图像的其他类。

我已在每张相册图片的底部添加了一个边框（带有div，而不是实际边框），以指示哪些图片是相册的一部分。

我需要做一些事情：

选择网格左侧的每个图像 - 专辑封面或图像 - 专辑 - 图像。

选择网格右侧的每个图像 - 专辑封面或图像 - 专辑 - 图像。

选择每张图片 - 相册图片，即相册中的最后一张图片。

到目前为止，当网格只有非专辑图片时，我能够选择左图像和右图像，但我不知道如何使用相册来处理这个问题，这是我实际需要的时候它。我不仅仅在匹配某个类时才能选择nth-child，但是当网格中有任何专辑时，所有n-child停止工作，因为它没有专辑，即使我试图定位所有图像（images-image-col）

在没有相册的情况下，fiddle工作（在大屏幕上）。

一旦我开始使用这些专辑，我甚至无法选择第一张图片专辑封面，我试过这个封面：

&:nth-child(2n+1) {
  .images-album-cover {
    outline: 1px dashed mediumvioletred;
  }
}

并且似乎没有做任何事情

这是专辑的HTML

<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
  <a class="thumbnail image images-image-thumbnail">
    <img>
    <div class="album-label">
      <figcaption>asdfasf <span>(5)</span></figcaption>
    </div>
  </a>
  <div class="images-album-cover-bar"></div>
</div>
<span id="gallery-detail-22">
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
  <div class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
  </div>
</span>

如果你们认为这样会更好，我会对JS解决方案持开放态度，但无论如何我仍然想知道这是否可能。

Answer 1

试试这个：

:nth-child(2n+1).images-album-cover {
    outline: 1px dashed mediumvioletred;
}

Answer 2

您是否尝试过使用类似的内容：

&:nth-child(2n+1) {
    &.images-album-cover {
        outline: 1px dashed mediumvioletred;
    }
}

顺便说一句，根据您的代码，您似乎正在使用SASS，我会回答这一点是理所当然的。

Answer 3

问题是包装

<span id="gallery-detail-22"></span>

这弄乱了第n个孩子的编号。我建议你把它拿出来。如果您需要确定哪些相册图像与相册封面相关联，以便您可以显示/隐藏它们，可能会为每个相册添加数据属性，例如

data-album="gallery-detail-22"

所以你的专辑html将是

<div class="col-xs-6 col-sm-4 images-image-col images-album-cover open">
    <a class="thumbnail image images-image-thumbnail">
        <img>
        <div class="album-label">
          <figcaption>asdfasf <span>(5)</span></figcaption>
        </div>
    </a>
    <div class="images-album-cover-bar"></div>
</div>    
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
</div>
<div data-album="gallery-detail-22" class="col-xs-6 col-sm-4 images-image-col images-album-image">
    <a class="thumbnail image images-image-thumbnail">
      <img>
    </a>
    <div class="images-album-image-bar"></div>
</div>

所有带有image-image-col类的div都是彼此的兄弟姐妹，所以.images-image-col：nth-​​child（2n + 1）就可以了。