CSS 复杂选择器：选择 div 项的第二个子项答案

【问题标题】：CSS complex selector: select the second child of a div itemCSS 复杂选择器：选择 div 项的第二个子项
【发布时间】：2015-02-02 09:08:07
【问题描述】：

我正在尝试为 css3 编写一个复杂的选择器。我需要选择一个项目的子项的第二个 div：这里是我测试的 html 代码：

<!DOCTYPE html>
<html>

<head>
    <style>
        div.main > div:nth-child(3) {
            display: none;
        }
    </style>
</head>

<body>
    <div class="main">
        -> 1-level
        <div>
            -----> 2-level
            <div>--------> 3-level BAR</div>
            <div>--------> 3-level FOO</div>
        </div>
    </div>
</body>

</html>

我需要选择 3 级 FOO ！但我不能附加另一个类其他 .main 类我正在尝试使用 'div.main > div:nth-child(3)' 没有任何成功.... 这是一个带有这段代码的jsfiddle。 http://jsfiddle.net/vwwuuhao/1/

【问题讨论】：

.main > div > div:nth-child(2)

标签： css css-selectors

【解决方案1】：

我认为您误解了nth-child() 的工作方式。它用于选择元素的第 n 个子元素，而不是“第 n 级子元素”。

你的选择器应该是这样的：

.main > div > div:nth-child(2) {
    display: none;
}

.main > div > div:nth-child(2) {
  display: none;
}

<body>
  <div class="main">
    -> 1-level
    <div>
      -----> 2-level
      <div>--------> 3-level BAR</div>
      <div>--------> 3-level FOO</div>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

这样做：

div.main > div > div:last-child {/*or use div:nth-child(2)*/
            display: none;
        }

【讨论】：

【解决方案3】：

div:nth-child(3) 是第三个兄弟姐妹。您正在寻找：

//         vvv — this is 2nd level
//               vvv — this is 2nd level
//                            vvv FOO is a second sibling
div.main > div > div:nth-child(2)

【讨论】：

【解决方案4】：

尝试使用 div:nth-of-type(x)

示例：https://jsfiddle.net/L6xkanrm/1/

例如：如果要在另一个 div 中选择第二个 div，请使用：

div div:nth-of-type(2) {
        display: none;
}

【讨论】：