Question

我正在尝试为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＆gt; div：nth-child（3）'没有任何成功...... 这里有一个jsfiddle与此代码。 http://jsfiddle.net/vwwuuhao/1/

Answer 1

我认为你错过了nth-child()的工作方式。它用于选择元素的第n个子元素而不是＆＃34; nth-level-child＆＃34 ;.

您的选择器应如下所示：

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这样做：

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

Answer 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)

Answer 4

尝试使用div：nth-of-type（x）

此处采样：https://jsfiddle.net/L6xkanrm/1/

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

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

CSS complex selector：选择div项的第二个子项

4 个答案: