myvin

幽灵般诡异的CSS选择器

myvin · 2016-12-02翻译 · 765阅读 原文链接

让我们用万圣节主题帖来尽情庆祝万圣节吧。我会使用一些来自CSS选择器王室坟墓的CSS选择器来拉开序幕,这些东西可是会让你害怕到骨子里的哟。额,也许没有那么恐怖,但是至少它们是有些诡异的。

迟钝的猫头鹰选择器

两年前,Heydon Pickering将它发扬光大,它看起来是这个样子的:

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

无图无真相,看看这迟钝的猫头鹰吧。这回记住了吧?!

插图来自Ping Zhu,摘自A List Apart。

这里想要实现的是给所有拥有前一个同胞节点的元素设置margin-top值。你没必要像下面这样做:

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

使用猫头鹰选择器,你将会得到均匀的间隔:

你也可以看看其他的小伙伴是如何玩转这个选择器的。

幽灵选择器

这个小家伙太诡异了,以至于我的WordPress网站都保存不了,所以让我们使用CodePen来看下效果(嵌入页面的CodePen看起来可能也会有些诡异,所以请尝试直接在CodePen上查看):

说到那些不同寻常的角色,当然也不能少了emoji表情!

<div class="👻">
  Mrs. Ghost
</div>
.👻 {

}

怪物选择器

说到那些不同寻常的角色,再来看看这些颜文字吧:

上面列出的都是可以作为选择器的哟!但是在这种情况下,一些字符需要用工具或者其他的方式来转义。幸运的是,Mathias Bynens已经提供了转义的工具

这就意味着我们可以像这样做:

让我们再来看看这些獠牙:

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

🔥 CSS4 is getting case insensitive matching on attribute selectors! pic.twitter.com/7LQBi2VUcL

— Wes Bos (@wesbos) December 2, 2015

坚强不屈的选择器

实现僵尸 斑马纹很简单对吧?

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

但是如果我们使用JavaScript的神奇魔法,通过在某些行上添加一个类使该行在视觉上消失遁形,结果会怎么样呢:

...
<tr><td></td></tr>
<tr class="BANISHED"><td></tr></tr>
<tr><td></td></tr>
...
.BANISHED {
  display: none;
}

现在我们的斑马纹已经一团糟了,就像在施法召唤的时候一堆蝾螈掉进了药锅(哦,对不起)。

CSS4对此有相应的解决之道:

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

上面的写法表示的是,在可见的行上计算奇偶,如此一来,斑马纹依然坚强不屈地保持完好无损。

然而该选择器还没有被完全支持,所以让我们像女鬼一样嚎叫吧,嚎叫到天荒地老,嚎叫到该选择器被完全支持。

穿肠而过的匕首选择器

还记得我们之前创建的那个特定元素<the-brain>吗?假如元素的模板内部有一些实实在在的HTML标签,就像这个样子:

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

正如我们所见,你给元素添加了样式,然后期望这个元素会乖乖地带着样式展现出来。但是,你血淋淋的双手是没有办法直接将其穿肠而过的。

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

这其实就是封装,是web组件化的关键所在,但是你可以用一把匕首刺穿这个幽灵的SHADOW DOM,就像这个样子:

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

但是现在只有Blink内核支持,我无法确定这会不会成为标准。Word的天呐,跨浏览器兼容之痛啊。

ID选择器

#container {

}

这个就太具体了,哈哈哈~~

译者myvin尚未开通打赏功能

相关文章