0

divセレクターで1番目と4番目ごとに選択:nth-childして、特定のスタイルを追加するにはどうすればよいですか？

.main{
  width:460px;
  height:240px;
}
.box{
  width:100px;
  height:100px;
  background:red;
  float:left;
  margin:10px;
}

/*I tried */

.box:nth-child(n+4),.box:first-child{
  margin:10px 10px 10px 0;
}

.box:nth-child(4n){
  margin:10px 0px 10px 10px;
}
<div class="main">
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
  <div class="box"></div> <!-- margin-left:0px -->
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div> <!-- margin-right:0px -->
</div>

2番目のコードは機能しますが、最初のコードで問題が発生していますか？

行の最初と最後のすべてのdivを選択するにはどうすればよいですか（行には4つのdivが含まれています）？

JSFiddle。

4

5 に答える 5

6

これを試して：

.box:nth-child(4n+1)

これには、最初の（+1）要素と4つおきの（）要素が含まれている必要があります4n。

于 2013-03-21T20:35:04.300 に答える
5

JSFIDDLE

4nは4、8、12...を選択します。

4n + 1は、1、5、9、13、..を選択します。

式（an + b）を使用します。説明：aはサイクルサイズを表し、nはカウンター（0から開始）、bはオフセット値です。

.box:nth-child(4n){
    margin:10px 0px 10px 10px;
}

.box:nth-child(4n+1){
   margin:10px 10px 10px 0;
}
于 2013-03-21T20:35:12.697 に答える
2

http://jsfiddle.net/jnQZU/2/

.box:nth-child(4n){
    background: blue;
}

.box:nth-child(4n+1){
    background: orange;
}
于 2013-03-21T20:36:16.933 に答える
1

これを試して：

http://jsfiddle.net/cJwVc/

.box:nth-child(4n+1){
   background-color:yellow;
   margin-left:0;
}

.box:nth-child(4n){
   background-color:blue;
    margin-right:0;
}
于 2013-03-21T20:38:53.540 に答える
0

IE8以下のサポートが必要な場合は、Jqueryのセレクターを使用する必要があります。あなたの例を使用して：

$('.box:nth-child(4n+1)').css('background-color', 'yellow');
于 2013-05-22T17:02:15.277 に答える