1

我如何只选择.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>
4

3 回答 3

6

你可以只使用两个类...

.media{
  /* styles here */
  padding:10px;
}
.slideshow .media{
  /* styles here */
  padding:20px;
}
于 2012-08-09T19:02:51.427 回答
4

它们并不意味着完全相同的东西，所以我会在该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
于 2012-08-09T19:02:52.980 回答
1

试试这个：

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

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

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

于 2012-08-09T19:11:32.880 回答