nth類型只爲1和2工作

Question

我有一個造型問題，我正在使用WordPress，並希望有前兩個類完全不同於其他類。

我理想的情況是有：

.si-biplace:nth-of-type(3) { float:left; margin:20px 0px 0px 0px; } 
.si-image:nth-of-type(3) { float:left; margin:20px 0px 0px 0px; border:0px; } 
.si-title:nth-of-type(3) { width:100px; height:20px; margin:0px; font-size:7px; color:#FFFFFF; font-weight:bold; } 

他們似乎正常工作時，它是：

.si-biplace { float:left; margin:-10px 0px 0px 0px; } 
.si-biplace:nth-of-type(2) { float:left; margin:-10px 0px 0px 15px; } 

是否有一個原因，它不會與工作的第n-的類型（ 3）但會與第2類的第n個？我基本上需要使用div的每個下一次不同的屬性，但不能有單獨的div類，因爲它通過php數組運行。

這是我的HTML & PHP結構櫃面我做錯了什麼：

<div class="si-biplace"> 
    <div class="si-image"> 
     <a href="http://universitycompare.com:8888/945/test/"> 
     <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a> 
    </div> 
    <div class="si-title"> 
     <a href="http://universitycompare.com:8888/945/test/">Testing Post Article Number1</a> 
    </div> 
    <div class="si-date"> 
     &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/945/test/"> 
     September 6, 2012 </a> 
    </div> 
</div> 
<div class="si-biplace"> 
    <div class="si-image"> 
     <a href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/"> 
     <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a> 
    </div> 
    <div class="si-title"> 
     <a href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/">What graduates need to know about creative internships</a> 
    </div> 
    <div class="si-date"> 
     &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/28/what-graduates-need-to-know-about-creative-internships/"> 
     July 3, 2012 </a> 
    </div> 
</div> 
<div class="si-biplace"> 
    <div class="si-image"> 
     <a href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/"> 
     <img width="340" height="170" src="http://universitycompare.com:8888/wp-content/uploads/2012/09/post-test.png" class="attachment-si-images wp-post-image" alt="post-test" title="post-test"/></a> 
    </div> 
    <div class="si-title"> 
     <a href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/">Students say they will work for free after graduating</a> 
    </div> 
    <div class="si-date"> 
     &nbsp;Date:&nbsp; <a style="color:#154157;" href="http://universitycompare.com:8888/25/students-say-they-will-work-for-free-after-graduating/"> 
     July 3, 2012 </a> 
    </div> 
</div> 

Answer 1

要從別人不同風格類的前兩個元素，最好爲類設置一般樣式設置，然後根據需要爲前兩個設置它們。

如果您出於某種原因希望通過爲元素的第3,4,5等子元素設置一些樣式來完成此操作，可以使用:nth-child(n+3)，並且指代第3，第4，第5等孩子它的一個元素的親友，使用:nth-of-type(n+3)。這可以與類選擇器結合使用，但它的確不是而是指的是指類中的第n個元素。

在你的情況，假設有這些元素之前沒有其它div元素，你可以這樣使用

.si-biplace:nth-of-type(n+3) { ... } 
.si-biplace:nth-of-type(n+3) .si-image { ... } 
.si-biplace:nth-of-type(n+3) .si-title { ... } 

不能使用結構，如.si-image:nth-of-type(3)，因爲在您的標記，在.si-image類中的每個元素是第一它的父母的孩子，因此永遠不會匹配選擇器。

Answer 2

好吧，我想我已經轉載您的問題。它看起來像你需要使用：第n個孩子（）爲「si-biplace」divs中的元素。

這裏是我的小提琴我的CSS ..

.biplace:nth-of-type(3){ 
    float:left; margin:20px 0px 0px 0px; 
} 


.biplace:nth-of-type(3) .image:nth-child(3){ 
    float:left; margin:20px 0px 0px 0px; border:0px; 
} 

.biplace:nth-of-type(3) .title:nth-child(3){ 
    width:100px; height:20px; margin:0px; font-size:7px; color:red; font-weight:bold; border:1px solid red; 
} 

和一些HTML，它應該是相同的結構...

<p class="image">Something</p> 
    <p class="image">Something</p> 

    <h2 class="title">First Title</h2> 
</div> 




<div class="biplace"> 
    <p class="image">Something</p> 
    <p class="image">Something</p> 

    <h2 class="title">Second Title</h2> 
</div> 




<div class="biplace"> 
    <p class="image">Something</p> 
    <p class="image">Something</p> 

    <h2 class="title">Third Title</h2> 
</div> 

這裏是一個小提琴，我開始重現這個問題。

http://jsfiddle.net/krishollenbeck/sFkLz/6/

而且和物品，其談到兩者的更詳細的區別...

http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/