nth-child没有采用所需的元素

debugcn 发表于 Dev

马塞尔·瓦西莱夫斯基（Marcel Wasilewski）

我得到了一个文档，其构建类似于以下代码：

<div id="menubox_container_box_body">
   <div class="categories">...</div>
   <div class="categories">
      <div class="cat_icon">...</div>
      <div class="cat_link">
          <div class="cat_link_container">...</div>
               <div class="cat_icon">...</div>
               <div class="cat_sub_link">
                  <div class="cat_link_container">...</div>
               </div>
                  <div class="cat_icon">...</div>
                  <div class="cat_sub_link">
               <div class="cat_link_container">...</div>
      </div>
   </div>

现在，我尝试使用此命令在第一个中选择a cat_link_container：

#menubox_categories_box_body .categories:nth-child(2) .cat_link .cat_link_container:nth-child(1){
    margin-bottom: 20px;
}

它的作用是使所有cat_link_container元素（甚至是cat_sub_linkdiv中的元素）都具有边距底限。但我选择了仅拿第一cat_link_container的cat_link，并给它一个margin-bottom。有人知道可能是什么问题？

哈利

要仅选择在其子元素class='cat_link_container'下具有under的元素，div class='cat_link'而不是在其子元素下具有相同类的元素，则需要使用>（children）选择器，如下面的代码示例中所示：

#menubox_container_box_body .categories:nth-child(2) .cat_link > .cat_link_container:nth-child(1){
    color: red;
    font-size: 24px;
}

<div id="menubox_container_box_body">
    <div class="categories">...</div>
    <div class="categories">
        <div class="cat_icon">...</div>
        <div class="cat_link">
            <div class="cat_link_container">...</div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div>
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div>
            </div>
        </div>
    </div>
</div>

解释：

原始选择器的解释如下：

#menubox_container_box_body .categories:nth-child(2) .cat_link .cat_link_container:nth-child(1)

使用查找元素id='menubox_container_box_body'。
在此元素下，找到所有后代元素（子代，孙子代等），它们是其父代的第二个子代，并且也具有class='categories'。
在上一点获得的所有元素下，找到带有 class='cat_link'
遍历在以上位置获取的所有元素，找到所有后代元素，这些后代元素是其父级的第一个子代，并且也具有class='cat_link_container'。

<div id="menubox_container_box_body"> <!-- 1st point in explanation -->
    <div class="categories">...</div>
    <div class="categories"> <!-- 2nd point in explanation -->
        <div class="cat_icon">...</div>
        <div class="cat_link"> <!-- 3rd point in explanation --> 
            <div class="cat_link_container">...</div> <!-- descendant, first-child of its parent and so selected -->
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- descendant of the element referenced by 3rd point, first-child of its own parent and so selected -->
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- descendant of the element referenced by 3rd point, first-child of its own parent and so selected -->
            </div>
        </div>
    </div>
</div>

我在回答中提供的修改后的选择器将被解释如下：

#menubox_container_box_body .categories:nth-child(2) .cat_link > .cat_link_container:nth-child(1)

使用查找元素id='menubox_container_box_body'。
在此元素下，找到所有后代元素（子代，孙子代等），它们是其父代的第二个子代，并且也具有class='categories'。
在上一点获得的所有元素下，找到带有 class='cat_link'
遍历在以上点中获取的所有元素，找到第3点所指元素的第一个子元素，该元素也具有class='cat_link_container'。请注意，它如何仅检查直子而不检查后代。

<div id="menubox_container_box_body"> <!-- 1st point in explanation -->
    <div class="categories">...</div>
    <div class="categories"> <!-- 2nd point in explanation -->
        <div class="cat_icon">...</div>
        <div class="cat_link"> <!-- 3rd point in explanation --> 
            <div class="cat_link_container">...</div> <!-- direct child, first-child of its parent and so selected -->
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- not direct link and hence not selected -->
            </div>
            <div class="cat_icon">...</div>
            <div class="cat_sub_link">
                <div class="cat_link_container">...</div> <!-- not direct link and hence not selected -->
            </div>
        </div>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。