CSS in Depth 学习札记之:猫头鹰选择器

写在前面

CSS 进阶神作 CSS in Depth 的中文版——《深入解析 CSS》,终于在原书出版两年后的“新冠”元年悄然问世。很多当年硬啃原版遗留的问题,在两位翻译大神的指点下逐一得到校正,这种感觉就是 FEEL 倍儿爽~。其中不乏一些当时被跳过的冷门知识,再次读到倍感亲切,不禁发散了一下,没想到还有点意思,比如这个 猫头鹰选择器

猫头鹰选择器

这是原书第三章精讲盒模型时,为了解决一个外边距样式的问题而给出的终极“大杀器”——

关于含义

  • 原名:lobotomized owl selector
  • 发音:[ləˈbɒtəmaɪzd aʊl sɪˈlektə(r)]
  • 译名:迟钝的猫头鹰选择器猫头鹰选择器
  • 发明人:Web 设计师 Heydon Pickering
  • 年份:2014年
  • 样式:* + *
  • 含义:选中文档流中 存在前一个任意兄弟元素 的所有元素。

关于用法

标注页面中猫头鹰选择器选中的元素,并设置其顶部外边距为 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>

页面效果:
CSS in Depth 学习札记之:猫头鹰选择器_第1张图片

是不是过于简单?这是因为示例中的页面元素比较简单罢了。猫头鹰选择器真正的强大之处,在于对 任意 元素生效。如果样式和页面略作调整:

.module > div, a, button {
    display: block;
    padding: 1rem;
    background: var(--clr-white);
}
<div class="module">
    <div>Owldiv>
    <a>Owla>
    <div>Owldiv>
    <button>Owlbutton>
div>

页面容器内的各元素依然可以保持相同的上边距:
CSS in Depth 学习札记之:猫头鹰选择器_第2张图片

惊不惊喜,意不意外?!

关于命名

再来看看这个神奇的选择器的名字:lobotomized owl。什么样的猫头鹰才算得上 lobotomized 的猫头鹰呢?lobotomized 这个词衍生自 lobotomy(读作 ləˈbɒtəmi),意为脑叶切断术、或 额叶前部脑白质切断术。这是上世纪 1930 ~ 1950 年代采用过的一项神经外科手术,用于治疗诸如精神分裂症、临床忧郁症在内的精神病。虽然历史还曾嘉奖过这方面有过突出贡献的科学家,但终究因其巨大的副作用和术后不确定性而淡出历史舞台。经此手术后的患者,往往丧失精神冲动,表现出类似痴呆、弱智的迹象,所以,一只标准的 lobotomized 猫头鹰大概长这样——
CSS in Depth 学习札记之:猫头鹰选择器_第3张图片
可见,中译本省略了关键的 lobotomized,只简称为“猫头鹰选择器”,从含义上讲似乎少了点原创人期望表达的意思。。。

不如就叫【呆头鹰选择器】可好?

参考

Manning - CSS in Depth

Chris Coyier: Spoooooky CSS Selectors

github - css-protips: use-the-lobotomized-owl-selector

你可能感兴趣的:(读书札记,日常小问题,css,猫头鹰选择器,lobotomized,owl,selector,选择器)