Question

我如何才选择不属于.media班级的.slideshow班级？

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

显然我可以.slideshow .media定位第二个，但我如何定位第一个呢？

注意：每个块都有多个，所以只需执行类似article:first-chlid的选择第一个实例就行不了。

多个块的示例......

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media"></figure>
    </div>
</article>

Answer 1

你可以使用两个班级......

.media{
  /* styles here */
  padding:10px;
}
.slideshow .media{
  /* styles here */
  padding:20px;
}

Answer 2

它们并不意味着完全相同，所以我会在class=media部分添加第二个类，以便您可以单独定位

<article>
    <div class="entry"></div>
    <figure class="media"></figure>
</article>

<article>
    <div class="slideshow">
        <div class="entry"></div>
        <figure class="media another-class"></figure>
    </div>
</article>

<强> CSS

.media.another-class {...}

您也可以使用直接子选择器

article > .media

Answer 3

试试这个：

:not(.slideshow)>.media{
  //code here
}

例如：
http://jsfiddle.net/kLyDF/

信息：
http://www.w3schools.com/cssref/sel_not.asp

如何只选择这个课程？

3 个答案: