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

【问题标题】：nth-of-type only working for 1 and 2nth-of-type 仅适用于 1 和 2
【发布时间】：2012-09-07 14:04:59
【问题描述】：

我有一个样式问题，我正在使用 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）一起使用，但可以与第 n 个类型 2 一起使用？我基本上希望下次使用 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>

【问题讨论】：

您能否显示一个重现此问题的demo？
很遗憾，没有，但我刚刚用我的 HTML 结构更新了我的问题，以防基于我的 css 错误？
从浏览器的“查看源代码”选项中包含 生成的 HTML 总是比 PHP 更好，因为 PHP 可能会生成 anything我们很担心
@Gareth - 我刚刚完成了 - 有帮助吗？
有没有可能只有 2 个存在？因为它应该工作。除非是浏览器问题。 nth-type-of 是 CSS3，所以它只适用于现代浏览器。但是，如果您得到 2 的结果，那么我怀疑这不是问题。但它应该可以工作......看看这个小提琴......jsfiddle.net/krishollenbeck/kqS3d

标签： html css css-selectors

【解决方案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 类中的每个元素都是其父级的第一个子级，因此永远不会匹配选择器。

【讨论】：

是的，这是正确的！经过多年的锻炼，我确实这样做了！只是，基于我的声誉无法回答我自己的问题。

【解决方案2】：

好的，我想我已经重现了您的问题。看起来您需要对“si-biplace”div 中的元素使用 :nth-child()。

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

【讨论】：