使用多个伪类/元素不工作的元素的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; 
}