使用多個僞類/元素不工作的元素的CSS路徑

Question

我想知道是否可以通過堆疊僞類來定位元素。

我嘗試這樣做：

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

，但只有當我們對工作行的ID [#one或#two]代替.row的：第一的型/ .row：最後型的

這是因爲我不能使用多個僞元素的目標元素，或者我只是在做一些愚蠢的事情而沒有意識到？

下面是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; 
}