带遍历的相邻选择器

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

我的问题是，当 .blurb-tile 内容块跟在 .media-tile 内容块之后（有时它不跟在它后面）时，我必须在 .blurb-tile 内容块上设置特定的样式。

我认为以下遍历方法加上相邻选择器会起作用：

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

然而它并没有...

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

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

提前致谢。

Answer 1

用你目前的 DOM 结构不可能用纯 css（至少以我的 css 知识）。我提供了一个 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()

带遍历的相邻选择器

Adjacent selector with traversal

html

css

css-selectors

traversal