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

Question

如何选择第二个text元素？

我试图做这样的事情：

.node text:nth-child(2)但无论哪种，我失去了一些东西，或者它不工作。

我使用Snap.svg添加文本的元素。

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

根据该文档，没有一类添加到文本元素的方式。

Answer 1

所以:nth-child()伪选择直接兄弟姐妹之间的工作，这意味着如果孩子不是旁边的DOM对方，这是行不通的。在这种情况下，我们可以使用:nth-of-type()，它不那么严格，并且不管DOM中断如何，都会针对下一个匹配元素（请参阅演示）。

从MDN：

的：第n个孩子（一个+ b）的CSS伪类，在文档树具有+ 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)的黄色由于中断而不起作用。

延伸阅读：

• CSS-Tricks - The Difference Between :nth-child and :nth-of-type
• MDN :nth-child
• MDN nth-of-type