第n类型只适用于1和2 [英] nth-of-type only working for 1 and 2

问题描述

我有一个造型问题，我使用WordPress，并想要有前两个类完全不同于其他人。

I have a styling problem, I am using WordPress and want to do have the first two classes completely different to the others.

我的理想情况是：

.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与类型2的第n？我基本上需要不同的属性为下一次使用div，但不能有单独的div类，因为它运行通过php数组。

Is there a reason why it will not work with nth-of-type(3) but will with nth of type 2? I basically want different attributes for every next time the div is used but cannot have separate div classes as it runs through a php array.

这是我的HTML& PHP结构incase我做错了：

Here is my HTML & PHP Structure incase I am doing something wrong:

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

推荐答案

其他的，最好设置类的一般样式设置，然后根据需要覆盖它们的前两个。

To style the first two elements in a class differently from the others, it is best to set general style settings for the class and then override them as desired for the first two.

如果由于某种原因希望通过为元素的第3，第4，第5等子元素设置一些样式，可以使用：nth-​​child（n + 3）第四，第五等元素的kinf的子元素，使用：nth-​​of-type（n + 3）。这可以与类选择器组合，但不是是指引用类中的第n个元素。

If you for some reason wish to do it by setting some styles for the 3rd, 4th, 5th etc. child of an element, you can use :nth-child(n+3), and to refer to the 3rd, 4th, 5th etc. child of its kinf of an element, use :nth-of-type(n+3). This can be combined with a class selector, but it does not mean referring to nth element in a class.

在你的情况下，在这些元素之前没有其他 div 元素，因此您可以使用

In your case, assuming there is no other div element before these elements, you could thus use

.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 是其父项的第一个子项，因此从不与选择器匹配。

You cannot use constructs like .si-image:nth-of-type(3), because in your markup, each element in class .si-image is the first child of its parent and therefore never matches the selector.

这篇关于第n类型只适用于1和2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！