Spoooooky CSS 選擇器

        讓咱們今年有一些萬聖節主題的帖子精神！我會從超過 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的我的博客