最早接触到猫头鹰选择器是在那段时间刷Bootstrap源代码的日子。
当时我并不知道这个选择器的由来，只是觉得开发者使用的这个选择器有点小意思。源码是这样写的:
.alert-block p + p {
margin-top: 5px;
}
来自于Bootstrap源代码3945行
开发者的意图是要给告警对话框中的段落设置 样式——让段与段之间有5px的间隔，但却没有像笔者时常实现的代码:not(:first-child)去为每个元素设置样式，不仅竖起大姆指。
直到这段时间读到Heydon Pickering的一篇文章“Axiomatic CSS and Lobotomized Owls”才知道，这个选择器实际上是选择器*+*的一种延伸， 而又因为*+*这种方式酷似猫头鹰，被称为猫头鹰选择器。
* + * {
margin-top: 5px;
}
怎么样，看出来了吗？上面我们就为定义了一个简单的猫头鹰选择器。经过简单的分析这个选择器：
+：相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
*：通配符,代表任意元素。
我们可以用如此精简的规则实现了文档流中相邻子元素之间的间隔。
笔者将猫头鹰选择器的优点归纳如下：
1 避免首尾元素产生不必要的margin
图（a）,是对所有元素应用margin的结果
2 善用层叠的优势
p {
text-align: justify;
}
p + p {
margin-top: 0;
text-indent: 2em;
}
正如开篇中Bootstrap中所用的那样，在这段代码中，我们不用定义一个特定的元素样式，而是转为定义一个规则。这将大大精简CSS代码。
猫头鹰选择器,你开始使用了吗？
网友评论