在聚合物中,CSS如何选择主机父元素的第一个元素？

Question

可以说我有一个聚合物元素:

<polymer-element name="milo-item" attributes="item" noscript>   <template>
    <style>
      host:first-child {
        color: red;
      }
      host(:first-child) {
        color: red;
      }
      host(:first-child) paper-item::shadow .button-content {
        color: red;
      }
      paper-item::shadow .button-content {
        color: blue;
      }
    </style>

    <paper-item>
      ...
    </paper-item>

  </template>
</polymer-element>

(我添加了额外的CSS选择器来指示什么不起作用)

然后我在div下创建了一堆元素:

<template repeat="{{item in foo}}">
  <milo-item item="{{item}}">
</template>

如何让CSS选择器仅应用于主机父级的第一项？

我希望:host(:first-child)可以工作,但事实并非如此

Answer 1

首先,你需要前面的冒号:host.

:host(:first-child)如果host元素是其父元素的第一个子元素,则选择host元素本身..parens中的选择器限定host元素.例如,:host(.foo)选择<milo-item class="foo">.如果你想在列表中设置第一个milo项目的样式,那就再去吧.(除非可能将其更改为:first-of-type.)

:host :first-child应该匹配主机影子树中的第一个孩子.但是,它匹配阴影根中的任何第一:host > :first-child个子项,因此您可能希望只匹配第一个顶级子项.因为第一个孩子可以是一个有点怪异(例如,如果在有不可见元素你没有想到),可能是更安全的使用:first-of-type或:nth-of-type

因此,<paper-item> 在你<milo-item>的影子DOM(又称本地DOM)中如何设置第一个样式的最终答案是:

:host > paper-item:first-of-type

顺便说一下,如果你真的想要设置样式<milo-item>的第一个孩子 - 也就是说,轻量级DOM中的一个实际孩子 - 你首先需要添加一个插入点以便它被渲染,并选择它如下:

:host ::content :first-child

这是一个显示这些规则的jsbin:

http://jsbin.com/kuqobi/4/edit?html,console,output

希望这可以帮助.