CSS进阶——巧用猫头鹰选择器

最早接触到猫头鹰选择器是在那段时间刷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代码。

猫头鹰选择器,你开始使用了吗？