写在前面
CSS 进阶神作 CSS in Depth 的中文版——《深入解析 CSS》，终于在原书出版两年后的“新冠”元年悄然问世。很多当年硬啃原版遗留的问题，在两位翻译大神的指点下逐一得到校正，这种感觉就是 FEEL 倍儿爽~。其中不乏一些当时被跳过的冷门知识，再次读到倍感亲切，不禁发散了一下，没想到还有点意思，比如这个 猫头鹰选择器。
猫头鹰选择器
这是原书第三章精讲盒模型时，为了解决一个外边距样式的问题而给出的终极“大杀器”——
关于含义
- 原名：
lobotomized owl selector - 发音：
[ləˈbɒtəmaɪzd aʊl sɪˈlektə(r)] - 译名：
迟钝的猫头鹰选择器、猫头鹰选择器 - 发明人：Web 设计师 Heydon Pickering
- 年份：2014年
- 样式：
* + * - 含义：选中文档流中 存在前一个任意兄弟元素 的所有元素。
关于用法
标注页面中猫头鹰选择器选中的元素，并设置其顶部外边距为 2rem：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lobotomized Owl Selector Demo</title>
<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>Owl</div>
<div>Owl</div>
<div>Owl</div>
<div>Owl</div>
</div>
</body>
</html>
页面效果：
是不是过于简单？这是因为示例中的页面元素比较简单罢了。猫头鹰选择器真正的强大之处，在于对 任意 元素生效。如果样式和页面略作调整：
.module > div, a, button {
display: block;
padding: 1rem;
background: var(--clr-white);
}
<div class="module">
<div>Owl</div>
<a>Owl</a>
<div>Owl</div>
<button>Owl</button>
</div>
页面容器内的各元素依然可以保持相同的上边距：
惊不惊喜，意不意外？！
关于命名
再来看看这个神奇的选择器的名字：lobotomized owl。什么样的猫头鹰才算得上 lobotomized 的猫头鹰呢？lobotomized 这个词衍生自 lobotomy（读作 ləˈbɒtəmi），意为脑叶切断术、或 额叶前部脑白质切断术。这是上世纪 1930 ~ 1950 年代采用过的一项神经外科手术，用于治疗诸如精神分裂症、临床忧郁症在内的精神病。虽然历史还曾嘉奖过这方面有过突出贡献的科学家，但终究因其巨大的副作用和术后不确定性而淡出历史舞台。经此手术后的患者，往往丧失精神冲动，表现出类似痴呆、弱智的迹象，所以，一只标准的 lobotomized 猫头鹰大概长这样——
可见，中译本省略了关键的 lobotomized，只简称为“猫头鹰选择器”，从含义上讲似乎少了点原创人期望表达的意思。。。
不如就叫【呆头鹰选择器】可好？ 😀😀
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
