恐怖的 CSS 选择器

今年让我们来点万圣节主题的帖子，感受一下节日气氛吧！我将以一些来自**阴间**的 CSS 选择器开始。呃，会让您**不寒而栗**的 CSS 选择器。好吧，也许不会，但它们至少有点奇怪。

被切除脑叶的猫头鹰选择器

Heydon Pickering 让它在两年前声名大噪。它看起来像这样

* + * {
  margin-top: 1.5em;
}

被切除脑叶的猫头鹰？明白了吗？！

其思想是，只有具有**前一个兄弟元素**的元素才能在**顶部**获得边距。这样您就不必执行以下操作

.the-last-one-so-don't-put-margin-on-me {
  margin-bottom: 0;
}

相反，您可以免费获得均匀的间距

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 被切除脑叶的猫头鹰。

您可以查看其他人如何使用它。

幽灵先生选择器

这个小家伙的字符非常奇怪，我的 WordPress 网站甚至无法保存它们，所以让我们在 CodePen 中使用它（嵌入可能看起来也很奇怪，请尝试在 CodePen 本身查看）

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 幽灵选择器。

说到不寻常的字符，请记住表情符号也是有效的！

<div class="&#x1f47b;">
  Mrs. Ghost
</div>

.👻 {

}

怪物选择器

说到不寻常的字符，这些dongers怎么样？

它们也可以是选择器！但在这种情况下，其中一些字符需要在 CSS 中进行转义。逃离怪物岛。或者其他什么。幸运的是，Mathias Bynens 有一个工具可以做到这一点。

这意味着我们可以执行以下操作

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 jrRBqB。

或者一些尖牙怎么样？

<div ^^=^^>
   OoooOOOO FANGS
</div>

[\^\^^=\^\^] {
  
}

另一个切除脑叶的选择器

如何使用类似这样的选择器？

the-brain:empty {
  color: green;
}

the-brain 是一种什么样的选择器？它是一个我们通过疯狂的科学（如弗兰肯斯坦的怪物）**自己创建的元素**。或者只是创建自定义元素或其他内容。

<template>
  The brain!
</template>

var tmpl = document.querySelector('template');

var brainProto = Object.create(HTMLElement.prototype);

brainProto.createdCallback = function() {
  var root = this.createShadowRoot();
  root.appendChild(document.importNode(tmpl.content, true));
};

var brain = document.registerElement('the-brain', {
  prototype: brainProto
});

（也许这应该使用customElements.define()？我不知道。）

因此，如果我们这样做，我们的原始选择器将匹配

<the-brain></the-brain>

但正如选择器所暗示的那样，如果我们这样做，它将不会匹配

<the-brain>
  Fallback content inside.
</the-brain>

它甚至不会匹配

<the-brain> </the-brain>

否则我们可以使用the-brain:blank {}，但:blank尚未真正得到支持。

不敏感选择器

有什么比不敏感更可怕？除了**大多数任何东西**。是的，这仍然是一个非常奇怪的选择器，对吧？

a[href$=".zip" i] {

}

末尾的“i”告诉属性值“.zip”可以匹配大写或小写字符。

这个来自 Wes Bos

🔥 CSS4 正在对属性选择器进行不区分大小写的匹配！ pic.twitter.com/7LQBi2VUcL

— Wes Bos (@wesbos) 2015年12月2日

只有正义者才能站立的选择器

僵尸斑马条纹很容易吧？

tr:nth-child(odd) {
  background: WhiteSmoke;
}

但是，如果我们通过将类名应用于某些行来使用**JavaScript 的魔法咒语**禁止某些行可见性呢？

...
<tr><td></td></tr>
<tr class="BANISHED"><td></tr></tr>
<tr><td></td></tr>
...

.BANISHED {
  display: none;
}

现在我们的斑马条纹全都乱了，就像在施法过程中有太多蝾螈掉进了大锅里（呃，抱歉）。

选择器级别 4 有一个修复方法

tr:nth-child(odd of li:not(.BANISHED)) {
  background: WhiteSmoke;
}

这意味着“奇数”仅对仍然可见的行进行计算，并且斑马条纹将保持不变。

不过，它在任何地方都还没有得到支持，所以让我们**像班希一样尖叫**，直到它得到支持。

刺穿肠道的刀选择器

还记得我们创建的自定义元素吗？<the-brain>？假设该元素的模板如下所示，其中包含一些实际的 HTML

<template>
  <div class="braaaain">The brain!</div>
</template>

正如我们已经看到的，您可以将 CSS 应用于该元素，它将像预期的那样级联到其中。但是您无法直接接触内部的元素。

/* works fine */
the-brain {
  color: pink;
}
/* But you can't reach inside like this */
.braaaain {
  color: red;
}

这就是封装。这正是 Web Components 的意义所在。但是，您可以像这样刺穿那个**可怕的旧 Shadow DOM**：

html /deep/ .braaaain {
  color: red;
}

但这仅在 Blink 中有效，我不知道它是否是标准或其他什么。啊，跨浏览器兼容性的**恐怖**。

ID 选择器

#container {

}

太具体了。#lol