CSS 进阶神作 CSS in Depth 的中文版——《深入解析 CSS》,终于在原书出版两年后的“新冠”元年悄然问世。很多当年硬啃原版遗留的问题,在两位翻译大神的指点下逐一得到校正,这种感觉就是 FEEL 倍儿爽~。其中不乏一些当时被跳过的冷门知识,再次读到倍感亲切,不禁发散了一下,没想到还有点意思,比如这个 猫头鹰选择器。
这是原书第三章精讲盒模型时,为了解决一个外边距样式的问题而给出的终极“大杀器”——
lobotomized owl selector
[ləˈbɒtəmaɪzd aʊl sɪˈlektə(r)]
迟钝的猫头鹰选择器
、猫头鹰选择器
* + *
标注页面中猫头鹰选择器选中的元素,并设置其顶部外边距为 2rem
:
<html lang="en">
<head>
<title>Lobotomized Owl Selector Demotitle>
<style>
body {
background-color: black;
margin: 0;
padding: 1rem;
/* Custom Colors */
--clr-red: #AF4629;
--clr-golden: #F59131;
--clr-white: #efefef;
}
/* Lobotomized Owl selector */
* + * {
margin-top: 2rem;
}
.module {
padding: 1rem;
background: var(--clr-golden);
border: 0.5rem solid var(--clr-red);
}
.module > div {
padding: 1rem;
background: var(--clr-white);
}
.module * + *::after {
color: var(--clr-red);
content: " (lobotomized)";
font-style: italic;
}
style>
head>
<body>
<div class="module">
<div>Owldiv>
<div>Owldiv>
<div>Owldiv>
<div>Owldiv>
div>
body>
html>
是不是过于简单?这是因为示例中的页面元素比较简单罢了。猫头鹰选择器真正的强大之处,在于对 任意 元素生效。如果样式和页面略作调整:
.module > div, a, button {
display: block;
padding: 1rem;
background: var(--clr-white);
}
<div class="module">
<div>Owldiv>
<a>Owla>
<div>Owldiv>
<button>Owlbutton>
div>
惊不惊喜,意不意外?!
再来看看这个神奇的选择器的名字:lobotomized owl
。什么样的猫头鹰才算得上 lobotomized
的猫头鹰呢?lobotomized
这个词衍生自 lobotomy
(读作 ləˈbɒtəmi
),意为脑叶切断术、或 额叶前部脑白质切断术。这是上世纪 1930 ~ 1950 年代采用过的一项神经外科手术,用于治疗诸如精神分裂症、临床忧郁症在内的精神病。虽然历史还曾嘉奖过这方面有过突出贡献的科学家,但终究因其巨大的副作用和术后不确定性而淡出历史舞台。经此手术后的患者,往往丧失精神冲动,表现出类似痴呆、弱智的迹象,所以,一只标准的 lobotomized
猫头鹰大概长这样——
可见,中译本省略了关键的 lobotomized,只简称为“猫头鹰选择器”,从含义上讲似乎少了点原创人期望表达的意思。。。
不如就叫【呆头鹰选择器】可好?
Manning - CSS in Depth
Chris Coyier: Spoooooky CSS Selectors
github - css-protips: use-the-lobotomized-owl-selector