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