我为这个问题道歉,因为我知道我错了。请编辑。这是我遇到的关于nth-child属性的问题。我正在使用Chrome浏览器进行开发,我也在IE的最新浏览器中对此进行了测试。
我遇到了针对第n个孩子(n + 5)div的能力,并进一步选择了我想要设置属性的类。没有媒体查询,它的效果很好。
这是代码:
div:nth-child(n+5) .clearing-thumbs li {
padding-top: 0;
}
当我尝试使用媒体查询执行完全相同的操作但从n + 3开始时出现问题。媒体查询有效但第n个子选择器被忽略。
这是代码:
@media #{$small-only} { div:nth-child(n+3) .clearing-thumbs li { padding-top: 0; }
}
我知道我遇到了这个问题,因为当我添加媒体查询和nth-child选择特定的子属性时,它可以正常工作。
这是正常工作的代码
@media #{$small-only} { .clearing-thumbs li:nth-child(n+3) { padding-top: 35px; }
}
所以我的问题变成了无论如何通过选择父div和子类来完成我想做的事情。我认为这是一个非常酷的功能,直到媒体查询不起作用我才知道。
这是html
<section class="thumbnail-section">
<div class="row collapse">
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
<div class="small-6 medium-3 left columns">
<ul class="clearing-thumbs clearing-feature" data-clearing>
<li class="clearing-featured-img"><a href="/images/fullslide7.jpg"><img data-caption="caption here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 2 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
<li><a href="/images/fullslide7.jpg"><img data-caption="caption 3 here..." src="/images/fullslide7-320x200.jpg"></a></li>
</ul>
</div>
</div>
</section>