Question

是否可以使用parent child:nth-child()并且仅适用于儿童？

html如下：

<body>
    <div>div 1</div>
    <div>
        div 2
        <div>div 2.1</div>
        <div>div 2.2</div>
    </div>
</body>

我想用CSS选择：div 1 & div 2，我用过：

body div:nth-of-type(1) {
    background: red;
    color: white;
}

body div:nth-child(2) {
    background: blue;
}

但div 2.1 & 2.21也被选中了。 JSFiddle

是否可以进行非递归选择？如果不是，我想唯一的解决方案是clases或id＆＃39; s ..

Answer 1

您可以在>和body之间加div来仅选择body的直接子女：

＆＃13;

body > div:nth-of-type(1) {
    background: red;
    color: white;
}

body > div:nth-child(2) {
    background: blue;
}

＆＃13;

<body>
    <div>div 1</div>
    <div>
        div 2
        <div>div 2.1</div>
        <div>div 2.2</div>
    </div>
</body>

＆＃13;

Answer 2

您可以使用＆＃34;＆gt;＆＃34;用于表示父子选择器的字符。由于2.1和2.2默认是透明的，因此不能解决着色问题，因此您应该对它们进行不同的设置：

https://jsfiddle.net/evccpeeL/1/

div {
    background: white;
}

body > div:nth-of-type(1) {
    background: red;
    color: white;
}

body > div:nth-child(2) {
    background: blue;
}

Answer 3

你实际上并不需要在这里使用伪类。

您可以使用直接子选择器>单独执行此操作

＆＃13;

body > div {
  background: red;
  color: white;
}
body > div > div {
  background: blue;
  color: white;
  padding-left: 1em;
}

＆＃13;

<body>
  <div>div 1</div>
  <div>
    div 2
    <div>div 2.1</div>
    <div>div 2.2</div>
  </div>
</body>

＆＃13;

您可能会发现此文章有用The 30 CSS Selectors you Must Memorize

使用nth-child（）非递归？

3 个答案: