在2个单独的表中选择“selected”类的第一个和最后一个“td”元素[重复]答案

【问题标题】：Select the first and last "td" elements with the class "selected" in 2 separate tables [duplicate]在2个单独的表中选择“selected”类的第一个和最后一个“td”元素[重复]
【发布时间】：2019-04-28 16:57:09
【问题描述】：

我有 2 个单独的表，每个 td 元素都可以包含“selected”类，如何在两个表中选择第一个和最后一个带有“selected”类的 td 元素。

<table class="table1">
    <tr>
        <td>Jill</td>
        <td class="selected">Smith</td>
    </tr>
    <tr>
        <td class="selected">Hill</td>
        <td class="selected">Morris</td>
    </tr>
</table>

<table class="table2">
    <tr>
        <td class="selected">Mills</td>
        <td>Garyn</td>
    </tr>
    <tr>
        <td>Lee</td>
        <td>Gutierrez</td>
    </tr>
</table>

第一项是“td”，类“selected”是Smith，最后一项是“Mills”

【问题讨论】：

你需要脚本来完成它。 CSS 没有 first-of-class 选择器。此外，要完全做到 first-of，目标元素必须是兄弟元素。
第一个总是在table1，最后一个在table2？
您要格式化元素还是选择它？请记住，您可以添加多个 css 类。
@LGSon 我认为这个问题不重复
@HienNguyen OP 询问 “我如何使用selected 选择第一个和最后一个 td 元素”，这两个骗子回答了这个问题。那怎么不是骗子呢？

标签： css

【解决方案1】：

使用 javascript 并将样式设置为第一个和最后一个 querySelectorAll

var matches = document.querySelectorAll(".selected");
if(matches.length>0){
matches[0].style.color="red";
matches[matches.length-1].style.color="red";
}

<table class="table1">
    <tr>
        <td>Jill</td>
        <td class="selected">Smith</td>
    </tr>
    <tr>
        <td class="selected">Hill</td>
        <td class="selected">Morris</td>
    </tr>
</table>

<table class="table2">
    <tr>
        <td class="selected">Mills</td>
        <td>Garyn</td>
    </tr>
    <tr>
        <td>Lee</td>
        <td>Gutierrez</td>
    </tr>
</table>

【讨论】：

最后一个孩子怎么样？