Question

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

如何使选择器工作？有什么限制？

我读过它只会选择传入的孩子，这很好，但是我可以选择哪些限制？

我正在制作一些样本：

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

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

Answer 1

select标记是一个选择器，但只能查看该组件的子项。

它不会选择任何比孩子更深的东西，所以它不会返回成功的结果，如：

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

目的实际上，只是按照定义的方式组织组件的子项。

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

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

内容选择子实例的第一类实例

1 个答案: