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元素是其父元素的第一个子元素，则

:host(:first-child)选择主机元素。。 parens中的选择器限定主机元素。例如，: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（a.k.a。本地DOM）的样式的最终答案是：

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

顺便说一句，如果你实际上想要设置<milo-item>第一个孩子的样式 - 也就是说，轻DOM中的一个实际孩子 - 你首先需要添加一个插入点以便它被渲染，并且选择它是这样的：

:host ::content :first-child

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

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

希望这有帮助。

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

1 个答案: