0

スタイリングに問題があります。WordPressを使用していて、最初の2つのクラスを他のクラスとは完全に異なるものにしたいです。

私の理想的な状況は次のとおりです。

.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のnthでは機能する理由はありますか？基本的に、次にdivを使用するたびに異なる属性が必要ですが、php配列を実行するため、個別のdivクラスを持つことはできません。

これが私が何か間違ったことをしている場合の私の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

さて、私はあなたの問題を再現したと思います。「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/

于 2012-09-06T22:44:22.790 に答える
1

クラスの最初の2つの要素のスタイルを他の要素とは異なるものにするには、クラスの一般的なスタイル設定を設定してから、最初の2つの要素を必要に応じてオーバーライドするのが最適です。

何らかの理由で要素の3、4、5などの子にいくつかのスタイルを設定して実行したい場合は、を使用:nth-child(n+3)して、要素のkinfの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がその親の最初の子であり、したがってセレクターと一致しないため、のような構造を使用することはできません。

于 2012-09-07T06:04:59.143 に答える