选择具有相同类但没有重复选择器的同级元素

少不把任何限制的时间父选择器(&)的数量可以在复杂的选择使用,因此,我们可以用它不止一次想在下面的例子来选择同级元素,而无需重复选择。

.demo {
  border: 1px solid black; /* add border to all elements with demo class */
  & + & { /* select all .demo that have another .demo sibling immediately prior */
    background: red;
  }
  & + & + & { /* select all .demo that have two .demo sibling immediately prior */
    background: chocolate;
  }
  & ~ & { /* select all .demo elements that have another .demo sibling prior */
    color: beige;
  }
}

编译时的上述代码将产生以下 CSS:

.demo {
  border-left: 1px solid black;
}
.demo + .demo {
  background: red;
}
.demo + .demo + .demo {
  background: chocolate;
}
.demo ~ .demo {
  color: beige;
}