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

4,430 阅读2分钟

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

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

请留下你指尖的温度

让太阳拥抱你

记得这是一个有温度的公众号