Html 为什么css第n个子选择器不能按预期工作？

本文认为：第n个子选择器的工作方式应该不同

在我的例子中，我必须使用

.drag\u box:nth child（3n+2）{}

来选择每三个div，但通常它应该是

。drag\u box:nth child（3n）{}

。怎么会？这是小提琴：

代码如下：

HTML:

<div id="content_box_search">
   <label>
      <input type="text" class="search" name="word"/>
      <span class="search-icon"></span>                     
   </label>
</div>
<div id="search_go">Go</div>
<div id="content_box_upload"> upload </div>
<div style="clear: both; height: 20px;"></div>



<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>

$(document).ready(function () {
    $('#search_go').hide();
    $('.search').bind('input', function () {
        if ($(this).val()) {
           $('#search_go').fadeIn(1000);
        }
        else {
           $('#search_go').fadeOut(1000);
       }
   });
});

.drag_box{
    position: relative;
    float: left;
    width:30%;
    height: 30px;
    background-color:#ccc;
    margin-right:5%;
    margin-bottom:10px;
}

/* .drag_box:nth-child(3n+1){ */

.drag_box:nth-child(3n+2){
    margin-right: 0; }

#content_box_search{
    float: left; }

#search_go{
    float: left;
    font-size: 12px;
    margin-left: 10px;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 50px;      }

#content_box_upload{
    float: right;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
     }

CSS:

<div id="content_box_search">
   <label>
      <input type="text" class="search" name="word"/>
      <span class="search-icon"></span>                     
   </label>
</div>
<div id="search_go">Go</div>
<div id="content_box_upload"> upload </div>
<div style="clear: both; height: 20px;"></div>



<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>
<div class="drag_box"></div>

$(document).ready(function () {
    $('#search_go').hide();
    $('.search').bind('input', function () {
        if ($(this).val()) {
           $('#search_go').fadeIn(1000);
        }
        else {
           $('#search_go').fadeOut(1000);
       }
   });
});

.drag_box{
    position: relative;
    float: left;
    width:30%;
    height: 30px;
    background-color:#ccc;
    margin-right:5%;
    margin-bottom:10px;
}

/* .drag_box:nth-child(3n+1){ */

.drag_box:nth-child(3n+2){
    margin-right: 0; }

#content_box_search{
    float: left; }

#search_go{
    float: left;
    font-size: 12px;
    margin-left: 10px;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    text-align: center;
    width: 50px;      }

#content_box_upload{
    float: right;
    width: 200px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #dedede;
    color: #646464;
    cursor: pointer;
     }

---

因为父元素的所有子元素都算作子元素（然后算作

n

s），而不仅仅是具有匹配类名的子元素。

n子元素

处理元素，而不是元素的类。啊，很高兴知道！谢谢！