在2个单独的表中选择类别为“ selected”的第一个和最后一个“ td”元素

Question

我有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”是史密斯，最后一个是“米尔斯”

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