Snap.svg - 选择第二个文本元素？答案

【问题标题】：Snap.svg - Select second text element?Snap.svg - 选择第二个文本元素？
【发布时间】：2016-06-10 02:08:53
【问题描述】：

如何选择第二个text 元素？

我尝试做类似的事情：

.node text:nth-child(2) 但要么我遗漏了某些东西，要么它不起作用。

我正在使用 Snap.svg 向元素添加文本。

element.text(x, y, 'text');

根据文档，没有办法向文本元素添加类。

【问题讨论】：

试试.node text:nth-of-type(2)
@Aziz，这行得通。现在我明白了。我选择了第二个孩子而不是第二个文本元素。请回复帖子以获得信用。

标签： css svg snap.svg

【解决方案1】：

所以:nth-child() 伪选择器在直接兄弟之间起作用，这意味着如果孩子在 DOM 中不相邻，它将不起作用。在这种情况下，我们可以使用不那么严格的:nth-of-type()，它会针对下一个匹配元素而不考虑 DOM 中断（参见演示）。

来自MDN：

:nth-child(an+b) CSS 伪类匹配文档树中在它之前有 an+b-1 个兄弟的元素，对于给定的 n 的正值或零值，并且具有父元素.更简单地说，选择器匹配一系列子元素中的数字位置与模式 an+b 匹配的多个子元素。

:nth-child()和:nth-of-type的演示：

.node {
  width:50%;
  float:left;
  border:5px solid #FFF;
  box-sizing:border-box;
}

.text, p {padding:1em;margin: 0; background: #000; color:#FFF;}

.node .text:nth-of-type(3) {
  background:green;
}

.node .text:nth-child(3) {
  color:yellow;
}

<div class="node">
  <div class="text">.text 01</div>
  <div class="text">.text 02</div>
  <div class="text">.text 03</div>
  <div class="text">.text 04</div>
</div>

<div class="node">
  <div class="text">.text 01</div>
  <div class="text">.text 02</div>
  <p>p</p>
  <div class="text">.text 03</div>
</div>

正如您在演示中看到的那样，左侧有一系列相同的孩子，而在右侧，它们被<p> 标签打断。 :nth-of-type(3) 应用的绿色背景在两个示例中都有效，而 :nth-child(3) 的黄色背景由于中断而无效。

进一步阅读：

【讨论】：