nth-child css 如果我们在 children 元素的兄弟元素中有 标签，则选择器无法正常工作

Question

一个简单的 <div> 有 5  作为 children 任何  的结尾我也有   标签。
当我想 select 通过 :nth-child(x) 任何索引大于 1 的 span 元素时，它不起作用
甚至 select document.querySelector() 也没有用
我在 FireFox 和 Chrome 上测试过
当我删除   标签时它起作用了

怎么可能？

console.log("i have 5 span children as well : ", document.querySelectorAll(".div1>span").length);

console.log("second span child is null : ", document.querySelector(".div1>span:nth-child(2)"));

console.log("third span child is second span element : ", document.querySelector(".div1>span:nth-child(3)").textContent);

console.log("select second element by another way: ", document.querySelectorAll(".div1>span")[1].textContent);

console.log("tag name of second child: ", document.querySelector(".div1>*:nth-child(2)").tagName);

html>body>div.div1>span:nth-child(2) {
  color: blue;
}

<html>

<body>
  <div class="div1">
    <span>this is example text 1</span>
    <br>
    <span>this is example text 2</span>
    <br>
    <span>this is example text 3</span>
    <br>
    <span>this is example text 4</span>
    <br>
    <span>this is example text 5</span>
    <br>
  </div>
</body>

</html>

Answer 1

查询按预期工作。当您运行 .div1>span:nth-child(2) 时，您请求的跨度元素是其 parent 的第二个 child，在本例中为 div1。 div1 的第二个 child 是一个  ，因此你得到 null。

按照吴浩的建议，你应该使用:nth-of-type

document.querySelector(".div1>span:nth-of-type(2)") 这将搜索第二个 span 元素，它是 div1

的 child

console.log("i have 5 span children as well : ", document.querySelectorAll(".div1>span").length);

console.log("second span child is null : ", document.querySelector(".div1>span:nth-of-type(2)"));

console.log("third span child is second span element : ", document.querySelector(".div1>span:nth-of-type(3)").textContent);

console.log("select second element by another way: ", document.querySelectorAll(".div1>span")[1].textContent);

console.log("tag name of second child: ", document.querySelector(".div1>*:nth-child(2)").tagName);

html>body>div.div1>span:nth-of-type(2) {
  color: blue;
}

<html>

<body>
  <div class="div1">
    <span>this is example text 1</span>
    <br>
    <span>this is example text 2</span>
    <br>
    <span>this is example text 3</span>
    <br>
    <span>this is example text 4</span>
    <br>
    <span>this is example text 5</span>
    <br>
  </div>
</body>

</html>

nth-child css 如果我们在 children 元素的兄弟元素中有 <br> 标签，则选择器无法正常工作

nth-child css selector not working correctly if we had <br> tag in sibling of children elements

html

javascript

css

css-selectors

queryselector