html - 带遍历的相邻选择器

Question

我有一种情况，我正在使用自己构建的流体网格。这些是我正在处理的两种内容类型的父级:.media-tile 和 .blurb-tile。

我删除了与此问题无关的多余标记，但我的标记基本上如下所示:

<div class="row">
  <div class="three columns">
    <div class="media-tile">
      <!-- content -->
    </div><!-- END .media-tile -->
  </div><!-- END .three.columns -->
</div><!-- END .row -->
<div class="row">
  <div class="twelve columns">
    <div class="blurb-tile">
      <!-- content -->
    </div><!-- END .blurb-tile -->
  </div><!-- END .twelve.columns -->
</div><!-- END .row -->

我的问题是，当 .media-tile 内容 block 之后时，我必须在 .blurb-tile 内容 block 上设置特定的样式(有时它不会不要跟着它)。

我认为下面的遍历方法加上一个相邻的选择器会起作用:

.row .three.columns .media-tile + .row .twelve.columns .blurb-tile {
  /* my properties here */
}

然而它并没有...

在这种特定情况下，是否有一个选择器可以与遍历一起使用，以便在我的 .blurb-tile 内容 block 跟随我的 .media- 时创建条件类tile 内容 block ？

如有任何帮助，我们将不胜感激。

提前谢谢你。

Answer 1

使用纯 css(至少以我的 css 知识)，您当前的 DOM 结构是不可能的。我为您的需求提供了一个 jquery 解决方案:

$(".media-tile")
  .parents(".row") //get ancestors elements with class row
  .next() //get next element(similar to css adjustment selector)
  .find(".blurb-tile") //find element with class blurb-tile
  .css("color", "red");//apply css for test purposes

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="three columns">
    <div class="media-tile">
    </div>
  </div>
</div>
<div class="row">
  <div class="twelve columns">
    <div class="blurb-tile">
      this
    </div>
  </div>
</div>

我还修复了您的一些 html 错误。

引用资料

.parents()

.next()

.find()