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内容块之后，我必须具有特定的样式（有时它不会跟随它）。

我认为以下遍历方法与相邻选择器相结合可以起作用：

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

然而它没有......

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

对此的任何帮助都将非常感激。

提前谢谢。

Answer 1

目前的DOM结构不可能与纯css一起使用（至少我的css知识）。我提供了一个满足您需求的jquery解决方案：

＆＃13;

$(".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

＆＃13;

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

＆＃13;

另外我修复了一些你的HTML错误。

<强>参考

.parents()

.next()

.find()

带有遍历的相邻选择器

1 个答案: