html - 如何在 CSS 中的 :first-child 之后选择元素？

Question

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

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

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

可能吗？

标签： htmlcss

Answer 1

如果您不受这些特定类名的限制，则可以将自定义类添加到最后选定行的单元格。如果您无法修改 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和 边框样式仅用于演示目的。