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/