选择除第一个子元素之外的元素之后

Question

我想编译下一个LESS规则: - 当前元素之后的每个元素,除了第一个子元素

它应该看起来像这样:

(& ~ *):not(:first-child) {
  margin-left: 5px;
}

或这个:

& ~ *:not(:first-child) {
  margin-left: 5px;
}

不幸的是两个都不起作用.

Answer 1

该:first-child伪类通常是指其父的第一个孩子.它不能用于忽略引用元素后面的第一个子节点(兄弟节点).

如果要选择除引用元素后面的第一个元素之外的所有元素,则应按如下方式编写:

.reference + * ~ *{
  color: red;
}

它.reference是引用元素,引用引用元素+ *的第一个兄弟,它可以是任何类型,~ *指的是任何类型的所有后续兄弟元素.

在Less中,您可以使用上面提供的选择器(或),您可以像下面这样编写它:

.reference {
  & + * ~ * {
    color: red;
    /* and any other rules */
  }
}

下面的代码段演示了这一点.

.reference + * ~ *{
  color: red;
}

<div class='reference'>Reference Element</div>
<p>Some other element which is the first one after reference element</p>
<div>The elements to be selected</div>
<p>The element to be selected</p>