选择器 ​

兄弟选择器 ​

屮，居然有这么好的东西，我一直都不知道，寄了。

就比如一个 div，里头有俩按钮黏在一起了，类都完全一样，都没设置 ID，你要怎么实现第一个样式不变，第二个按钮往下移动一段距离？嗯，兄弟选择器就是干这个的，简单挂个示例：

.button-link + .button-link {
  margin-top: 1em;
}

这样，多个 .button-link 中，除了第一个和最后一个都会添加这个属性，绝了，居然还有这种好东西。

猫头鹰选择器 ​

其实算是兄弟选择器的进阶玩法，它的 syntax 就像这样 * + *，像个猫头鹰，因此得名，具体应用的话，就是指定一个容器，里头套猫头鹰选择器，让每个元素都遵循一个样式，比如各个元素之间的边距之类的，比如上面的示例可以如此改写：

.aside > * + * {
  margin-top: 1em;
}

如果问实际的影响的话，那就是说之后在 aside 里头可以添加任意的元素了，所有的元素都会遵循兄弟选择器那套，岂不美哉。