有没有办法在 javascript 查询选择器中使用 :first ？答案

【问题标题】：Is there a way to use :first in javascript queryselector?有没有办法在 javascript 查询选择器中使用 :first ？
【发布时间】：2023-03-30 23:28:01
【问题描述】：

我有一个包含用户列表的表格，我想隐藏他们在活动中的所有重复项。下图中的一个示例隐藏了第二个 tr#user-3。

但是当我尝试使用temp1.querySelectorAll('tr:not(#user-3:first)') 时，它没有返回任何节点，而是带来了无效的选择器错误。可能是什么原因，我该如何解决？

【问题讨论】：

也许你的意思是:first-of-type 或:first-child

标签： javascript css-selectors jquery-selectors

【解决方案1】：

:first 不是 CSS 规范的一部分，这是特定于 jQuery 的。

要访问第一个和最后一个元素，请尝试。

    var nodes = temp1.querySelectorAll('tr');
    var first = nodes[0];
    var last = nodes[nodes.length- 1];

【讨论】：

我希望能够将所有节点与第一个节点分开

【解决方案2】：

您可以改用querySelector()。它总是为您提供与选择器匹配的第一个元素。

const firstEl = temp1.querySelector('tr');

QuerySelector Documentation

【讨论】：

我想得到所有不是第一个元素而不仅仅是一个。

【解决方案3】：

我无法弄清楚给定问题的问题所在。但是下面的代码似乎可以工作。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<table class="tables">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr id="user3">
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
</table>
</body>
<script>
    window.onload = function(){
        var table = document.querySelectorAll(".tables tr#user3:not(:nth-child(2))");
        //console.log(table);
        table.forEach(el => {
            el.style.backgroundColor = "red";
        })
    }
</script>
</html>

该代码也适用于last-child

【讨论】：