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; }

是否有理由不使用nth-of-type（3），而是使用类型2的n？我基本上希望每次使用div时都有不同的属性，但是当它通过php数组运行时不能有单独的div类。

这是我的HTML＆amp; 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

好吧，我想我已经复制了你的问题..看起来你需要使用：nth-child（）用于“si-biplace”div中的元素。

这是我的小提琴中的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/

Answer 2

要使类中的前两个元素与其他元素的样式不同，最好为该类设置常规样式设置，然后根据前两个要求覆盖它们。

如果您出于某种原因希望通过为元素的第3个，第4个，第5个等子项设置一些样式来执行此操作，则可以使用:nth-child(n+3)，并参考第3个，第4个，第5个等如果是元素的kinf，请使用: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中的每个元素都是其父级的第一个子元素，因此永远不会与选择器匹配。

nth-of-type仅适用于1和2

2 个答案: