複数の擬似クラス/要素が動作していない要素へのCSSパス

Question

擬似クラスを積み重ねて要素を対象とすることが可能かどうか疑問に思っていました。

私はこの試みた：

#advertise .row:first-of-type .one-third:nth-of-type(2) .contentwrap { 
    font-size:16px; 
} 

をしかし、私たちの行のためのID場合にのみ、[#oneまたは#two] .rowの代わりに動作します：最初の型/ .row：最後-of-type

これは私が複数の疑似を使ってターゲット要素を傾けたり、何かばかげて実現していないためですか？ここ

はHTMLである：

<div id="advertise"> 
    <h1 class="maintitle"></h1> 
    <h2 class="maintitle-sub"></h2> 

    <div class="contentwrap"> 
     <p></p> 
    </div> 

    <div class="row" id="one"> 
     <div class="one-third first shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap">     
       <p></p> 
      </div> 
     </div> 
     <div class="one-third shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap"> 
       <p></p> 
      </div> 
     </div> 
     <div class="one-third shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap"> 
       <p></p> 
      </div> 
     </div> 
    </div> 

    <div class="row" id="two"> 
     <div class="one-third first shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap">     
       <p></p> 
      </div> 
     </div> 
     <div class="one-third shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap"> 
       <p></p> 
      </div> 
     </div> 
     <div class="one-third shadow"> 
      <h1 class="header"></h1> 
      <div class="contentwrap"> 
       <p></p> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

:first-of-typeセレクタは、要素の特定のタイプ（例えば<div>）の最初のインスタンスを選択します。ここでは、最初の.row要素は秒の<div>要素なので、:first-of-typeセレクタでは選択されません。

代わりに、あなたが使用することができます。

#advertise .row:nth-of-type(2) .one-third:nth-of-type(2) .contentwrap { 
    font-size:16px; 
} 

をしかし、それはすでに（その要素に一意である必要があります） id属性を持っているとして、あなたが同様にこだわることがあります。

#advertise #one .one-third:nth-of-type(2) .contentwrap { 
    font-size:16px; 
}