获取所有第一个 child 类名 x 的选择器

Question

我有这个html结构

    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>

我想从带有class容器的元素中获取，所有first-child带有class的文件。

我试过了

let selected=document.querySelectorAll(".container:first-child.paper");

但是错了。我如何获得正确的查询选择器？

Answer 1

您的选择器不正确，无法定位您要查找的元素。

尝试

let selected = document.querySelectorAll(".container .paper:first-child");

演示：

let selected = document.querySelectorAll(".container .paper:first-child");
console.log(selected);

<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="paper">1234</li>
  <li class="rock"></li>
</ul>
<ul class="container">
  <li class="rock"></li>
  <li class="paper"></li>
</ul>
<ul class="container">
  <li class="paper">ABCD</li>
  <li class="rock"></li>
</ul>

Answer 2

let selected= document.querySelectorAll(".container .paper:first-child");
selected.forEach(e => e.textContent = 'First Paper');

    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>
    <ul class="container">
        <li class="rock"></li>
        <li class="paper"></li>
    </ul>
    <ul class="container">
        <li class="paper"></li>
        <li class="rock"></li>
    </ul>

获取所有第一个 child 类名 x 的选择器

selector for get all the first child with classname x

javascript

css

queryselector