我有一种情况,我正在使用自己构建的流体网格。这些是我正在处理的两种内容类型的父级:.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 ?
如有任何帮助,我们将不胜感激。
提前谢谢你。
最佳答案
使用纯 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 错误。
引用资料
关于html - 带遍历的相邻选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33497585/