Question

不知道为什么这不起作用：

:not(first-child):nth-child(3n+2){
  margin-left: 30px;
  margin-right:30px;
}

它经历3n + 2模式，我想从该模式中排除第一个孩子，这可能吗？

这行得通，但这是4行代码。我想减少此代码段的代码：

:nth-child(3n+2){
  margin-right:30px;
}
:nth-child(3n+4){
  margin-left: 30px;
}

Answer 1

您需要在第一个孩子前使用冒号（:)，因此应该为-

href="~/dist/...."

请参考以下代码段。

:not(:first-child):nth-child(3n+2){
  margin-left: 30px;
  margin-right:30px;
}

span {
  color: white;
  float: left;
  margin: 10px;
  padding: 10px;
  background-color: black;
}

span:not(:first-child):nth-child(3n+1) {
  background-color: red;
}

span:nth-child(3n+2) {
  background-color: blue;
}

span:nth-child(3n+3) {
  background-color: green;
}

Answer 2

在这里检查此解决方案，我添加CSS可以遵循此模式的第一个元素。 Internet Explorer 8和更早版本不支持：nth-child（）选择器。

p:nth-child(1n+2) {
    background: red;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p>The first.</p>
<p>The second.</p>
<p>The third.</p>
<p>The fourth .</p>
</body>
</html>

CSS选择器先排除第一个孩子，然后排除第n个孩子模式

2 个答案: