在polymer中，如何选择主机的第一个元素&x27；谁的父母？

假设我有一个聚合物元素：

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

主持人：第一个孩子{
颜色：红色；
}
主机（：第一个孩子）{
颜色：红色；
}
主机（：第一个子）纸张项目：：shadow.button内容{
颜色：红色；
}
纸张项目：：阴影。按钮内容{
颜色：蓝色；
}
...

（我添加了额外的CSS选择器以指示哪些不起作用）

然后我在一个div下创建了一组元素：

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

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

---

我希望：host（：first child）起作用，但它不起作用。首先，你需要在

：host

前面加上冒号

：host（：first child）

如果宿主元素是其自身父元素的第一个子元素，则选择宿主元素本身。。parens中的选择器限定主体元素。例如，

：主机（.foo）

选择

。如果要设置列表中第一个milo项目的样式，请不要再继续。（除非可能将其更改为

：类型的第一个

）

：主机：第一个子节点

应与主机阴影树中的第一个子节点匹配。但是，它匹配阴影根中的任何第一个子项，因此您可能希望只匹配第一个顶级子项。因为第一个孩子可能有点奇怪（例如，如果其中有你没有想到的不可见元素），所以使用

：类型的第一个

或

：类型的第n个

因此，对于如何在

的阴影DOM（也称为本地DOM）中设计第一个

的最终答案是：

：主机>纸张项目：第一种类型

顺便说一句，如果您真的想为

的第一个子对象（即灯光DOM中的实际子对象）设置样式，则首先需要添加一个插入点，以便渲染它，并按如下方式选择它：

：主机：：内容：第一个孩子

下面是一个jsbin，显示了这些规则的作用：

---

希望这有帮助。

你能澄清这个问题吗？标题是“主机父级的第一个元素”，描述是“主机的第一项”。：主机是主机元素，在本例中，

。您是要选择它的第一个子项，它的阴影根（纸张项目）中的第一个子项，还是在

列表中的第一个子项？我的同事指出，

:n类型的
:n更容易预测。例如，
纸张项目：第n个类型（1）
将忽略
标记并选择第一个
。请参阅：编辑的答案以将代码更新为Polymer 1.0，并更正我原始答案中的一些错误。