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、2 番目のものをターゲットにすることはできますが、最初のものをターゲットにするにはどうすればよいでしょうか?

注: これらのブロックはそれぞれ複数あるため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

2つのクラスを使用できます...

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

それらはまったく同じことを意味するわけではないので、class=mediaパーツに 2 番目のクラスを追加して、個別にターゲットにできるようにします。

<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 に答える