0

我有一个样式问题，我正在使用 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) 但适用于 nth of type 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>
4

2 回答 2

1

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.

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.

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 { ... }

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.

于 2012-09-07T06:04:59.143 回答
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/

于 2012-09-06T22:44:22.790 回答