Spoooooky CSS 选择器

2019独角兽企业重金招聘Python工程师标准>>>

        让我们今年有一些万圣节主题的帖子精神！我会从超过 GRAVE.eR.CSS选择器中挑选一些将冻结你骨头的选择器。也许不可能，但他们至少有点怪异。

迟钝的猫头鹰选择器（the lobotomized owl selector）

        Heydon Pickering使这一个在两年前出名。 我看起来像这样：

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

这个想法是，只有具有先前兄弟的元素在顶部获得边缘。 所以你没必要做像下面的东西（codepen）：

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

相反，你甚至有点免费的间距：

<div class="module">
  <div>Owl</div>
  <div>Owl</div>
  <div>Owl</div>
  <div>Owl</div>
</div>

* + * {
  margin-top: 1rem;
}


.module {
  border: 0.5rem solid #AF4629;
  padding: 1rem;
  background: #F59131;
}
.module > div {
  padding: 1rem;
  background: #efefef;
}
.module * + *::after {
  content: " (lobotomized)";
  color: #AF4629;
  font-style: italic;
}

body {
  background: black;
  margin: 0;
  padding: 1rem;
}

你可以看到其他人也在玩弄它。

Mr. Ghost 选择器

        这个小家伙是如此奇怪的字符，我的WordPress网站甚至不会保存他们，所以让我们在一个Pen（嵌入可能看起来很奇怪，试图看看CodePen本身）：

    html:

<div class="༼•̫͡•༽">
  Mr. Ghost
</div>

<div class="?">
  Mrs. Ghost
</div>

       css

.༼•̫͡•༽ {
  background: GhostWhite;
  color: darken(GhostWhite, 10);
  font-family: 'Creepster', cursive;
  
  padding: 3rem;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.? {
  background: AntiqueWhite;
  color: darken(AntiqueWhite, 15);
  font-family: 'Creepster', cursive;
  
  padding: 3rem;
  text-align: center;
  font-size: 3rem;
}


body {
  margin: 0;
  padding: 1rem;
}

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

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

.👻 {

}

怪物选择器

    

这些选择器也太奇葩了！ 但在这种情况下，其中一些字符需要在CSS中转义。 像从蒙特塞拉岛逃离。 或者其他的东西。 幸运的是Mathias Bynens有一个工具。

    这样意味着我们可以这样做（codepen）：

<div class="~⁰෴⁰~">
  Monster
</div>

.\~⁰෴⁰\~ {
  background: lightgreen;
  text-align: center;
  padding: 2rem;
}

   

    或者是一些毒牙：

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

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

另一部分被切除的选择器

the-brain:empty {
  color: green;
}

     什么样的选择器是大脑？这是我们创造了我们自己的疯狂科学像弗兰肯斯坦的怪物元素。或者只是创建一个自定义元素或什么。

<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:

    

只有正直的摊位选择器

    斑马条纹是容易的，对吗？

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 Knife Through The Guts Selector

    还记得我们创建的自定义元素吗？ <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组件，你能插入到里面，像这样：

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

    这只适用于Blink，但我不知道它是标准的还是什么。 跨浏览器兼容性的错误。

ID选择器

#container {

}

    

 

 

原文出处：《Spoooooky CSS Selectors》

转载时请注明：来自w-rain的个人博客

转载于:https://my.oschina.net/myrainspace/blog/777498