我如何查询具有扩展类作为目标的第n个子属性

时间:2015-02-03 16:11:25

标签: html css css-selectors media-queries

我为这个问题道歉,因为我知道我错了。请编辑。这是我遇到的关于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>

0 个答案:

没有答案