Question

如何选择第二个.node text:nth-child(2)元素？

我尝试过这样的事情：

element.text(x, y, 'text');但要么我错过了某些内容，要么就是无法正常工作。

我使用Snap.svg向元素添加文字。

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

Answer 1

因此:nth-child()伪选择器在直接兄弟之间起作用，这意味着如果子节点在DOM中彼此不相邻，则它将不起作用。在这种情况下，我们可以使用不太严格的:nth-of-type()，并且无论DOM中断如何都会针对下一个匹配元素（参见演示）。

来自MDN：

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

进一步阅读：

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

1 个答案: