20

DIV の長い行があり、nth-child セレクターを使用して 4 番目の DIV ごとにパディングを変更する必要がありますが、まったく機能させるのに問題があります。

これが私のcssです：

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    background-color: #0F0;
}
.content_tab:nth-child(4){
    background-color: #F00;
    margin-right: 0px;
}

ここに私のHTMLがあります：

<div class="content">
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
</div>

何か案は？

4

3 に答える 3

12 
.content div:nth-child(4n) {  /* selects 4, 8, 12, 16, etc. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/1/

または、最初の要素から 4 つおきの要素が必要な場合は、次のように使用できます。

.content div:nth-child(4n + 1) { /* selects 1, 5, 9, 13 .. */
    padding: 10px;
}

http://jsfiddle.net/y6vfg/7/

于 2013-06-05T19:35:34.353 に答える
4

セレクターで 4 番目ごとの要素を取得するには、次を使用します。4n

.content_tab:nth-child(4n){
    background-color: #F00;
    margin-right: 0px;
}

フィドルの例

フィドルで div のサイズを小さくしたことに注意してください。これにより、動作が見やすくなりました。

于 2013-06-05T19:35:31.513 に答える