内容选择 child 个实例的第一个 class 个实例

Question

我有一个简单的：<content select=""></content>，非常简单。将传递给它的项目本质上是一组带有 class page 的 div，所以理想情况下，我想要做的是将内容设置为第一个 .page

如何让 selector 工作？有什么限制？

我读到它只会 select 传入 child，这很好，但是我能做什么有限制吗 select?

我正在构建一些示例：

<dom-module id="my-book">
 <h2 id="header">{{title}}</h2>
 <div id="content">
   <content select=".page:first-child"></content>
 </div>
 <div id="footer">
   <div id="back">Back</div>
   <div id="next">Next</div>
 </div>
</dom-module>

然后我会实现诸如：

<my-book>
 <div class="page">
  Page 1
 </div>
 <div class="page">
  Page 2
 </div>
 <div class="page">
  Page 3
 </div>
 <div class="page">
  Page 4
 </div>
</my-book>

因为它仅限于元素的 children，我不确定我是否能够对其使用任何类型的过滤，例如我的示例：.page:first-child 或如果有一个特定的子集，我被允许用于此 select 或字符串。

Answer 1

select标签是一个selector，但是只能看组件的children。

它不会select比children更深，所以它不会return成功的结果如：

<div class="page">
  <div class="page"></div>
</div>

目的实际上只是为了按照定义规定的方式组织组件的 children。

默认情况下，在这种情况下，您应该将默认设置为 :nth-child(1)，或 :first-child，或 :first。

然后 Back 和 Next 将在其他 div 之间移动。理想情况下，只是为了保持格式，我会使用 nth-child 然后在 Next/Back 事件触发时传入你想要的 child 而不是首先使用自定义内容等

内容选择 child 个实例的第一个 class 个实例

content selecting first class instance of child instances

polymer

polymer-1.0

dart-polymer