我如何在 CSS 中的 a:first-child 之后的 select 元素？

Question

我试图 select 通过使其边框在选定区域上变粗来在桌子上的一个部分，所以我需要更改特定单元格的边框以获得类似的东西。

这是我最好的尝试。 每个选定的单元格都有一个“选定的”class，如果有一个选定的单元格，则该行也有一个选定的 class。 我希望你能明白；）

.table tr.selected:first-child td.selected{
    border-top-width:5px;
    border-top-color:#000;
}

可能吗？

Answer 1

如果您不受这些特定 class 名称的限制，则可以将自定义 class 添加到最后选定行的单元格。 如果您无法修改 HTML，您可以尝试使用 JavaScript 添加自定义类。

 var selectedRows = document.querySelectorAll('tr.selected'); selectedRows[selectedRows.length-1].classList.add('last-selected-row');

 table{ border-collapse: collapse; } table tr td{ border: 1px solid #e2e4e8; padding: 10px; } table td.selected{ background-color: #cae5cd; } table tr.selected td.selected:first-child{ border-left: 3px solid black; border-right: none; } table tr.selected td.selected:last-child{ border-right: 3px solid black; border-left: none; } table tr.selected td.selected + td:not(.selected){ border-left: 3px solid black; } table tr:not(.selected) + tr.selected td.selected{ border-top: 3px solid black; border-bottom: 1px solid #e2e4e8; } table tr.last-selected-row td.selected{ border-bottom: 3px solid black; }

 <table> <tr> <td>far east</td> <td></td> <td>USD</td> </tr> <tr> <td>pol</td> <td>pod</td> <td>USD</td> </tr> <tr class="selected"> <td class="selected">VALENCIA MADRID</td> <td class="selected">BRISBANE</td> <td>USD</td> </tr> <tr class="selected"> <td class="selected">VALENCIA MADRID</td> <td class="selected">Melbourne</td> <td>USD</td> </tr> <tr class="selected"> <td class="selected">VALENCIA MADRID</td> <td class="selected">SYDNEY</td> <td>USD</td> </tr> <tr> <td>VALENCIA MADRID</td> <td>Chongoing</td> <td>USD</td> </tr> </table>

我在片段中添加的padding和边框 styles 仅用于演示目的。