CSS nth-chlld funktioniert nur bei sichtbaren Elementen?

Question

Ich weiß, :nth-child prüft tatsächlich „Kinder“ und „sichtbare Kinder“, aber gibt es einen Selektor, der sichtbare Kinder verarbeitet?

Angenommen, ich habe eine Tabelle und stelle die ungeraden Zeilen auf unterschiedliche Farben ein

Ich habe einen Suchfilter, der Zeilen ausblendet, die nicht mit der Suche übereinstimmen. Wenn ich jetzt suche, wechseln die Zeilen nicht mehr die Farben.

Natürlich kann ich jedem Element Klassen hinzufügen/entfernen, was ich im Grunde schon tue, um sie auszublenden/anzuzeigen, aber ich dachte, ich frage mal, ob es eine CSS-Möglichkeit gibt, dies zu tun.

const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');

function search() {
  const str = searchElem.value.toLowerCase();
  const rows = tableElem.querySelectorAll('tr');

  rows.forEach(function(row){
    const text = row.textContent.toLowerCase();
    if (str.length && !text.includes(str)) {
      row.classList.add('hide');
    } else {
      row.classList.remove('hide');
    }
  });
}

searchElem.addEventListener('keyup', search);

tr {
  background-color: #CDF;
}

tbody>tr:nth-child(odd) {
  background-color: #DEF;
}

thead>tr {
  background-color: lightgreen;
}

.hide {
  display: none;
}

<input type="search" placeholder="search">
<table>
  <thead>
    <tr><td>Name</td><td>Amount</td></tr>
  </thead>
  <tbody>
    <tr><td>Apple</td><td>220</td></tr>
    <tr><td>Watermelon</td><td>465</td></tr>
    <tr><td>Orange</td><td>94</td></tr>
    <tr><td>Pear</td><td>567</td></tr>
    <tr><td>Cherry</td><td>483</td></tr>
    <tr><td>Strawberry</td><td>246</td></tr>
    <tr><td>Nectarine</td><td>558</td></tr>
    <tr><td>Grape</td><td>535</td></tr>
    <tr><td>Mango</td><td>450</td></tr>
    <tr><td>Blueberry</td><td>911</td></tr>
    <tr><td>Pomegranate</td><td>386</td></tr>
    <tr><td>Carambola</td><td>351</td></tr>
    <tr><td>Plum</td><td>607</td></tr>
    <tr><td>Banana</td><td>292</td></tr>
    <tr><td>Raspberry</td><td>912</td></tr>
    <tr><td>Mandarin</td><td>456</td></tr>
    <tr><td>Jackfruit</td><td>976</td></tr>
    <tr><td>Papaya</td><td>200</td></tr>
    <tr><td>Kiwi</td><td>217</td></tr>
    <tr><td>Pineapple</td><td>710</td></tr>
    <tr><td>Lime</td><td>983</td></tr>
    <tr><td>Lemon</td><td>960</td></tr>
    <tr><td>Apricot</td><td>647</td></tr>
    <tr><td>Grapefruit</td><td>861</td></tr>
    <tr><td>Melon</td><td>226</td></tr>
    <tr><td>Coconut</td><td>868</td></tr>
    <tr><td>Avocado</td><td>385</td></tr>
    <tr><td>Peach</td><td>419</td></tr>
  </tbody>
</table>

Answer 1

没有选择器，但如果您愿意接受这种情况的特定解决方案，那么您可以依赖如下所示的渐变：

const searchElem = document.querySelector('input');
const tableElem = document.querySelector('table');

function search() {
  const str = searchElem.value.toLowerCase();
  const rows = tableElem.querySelectorAll('tr');

  rows.forEach(function(row){
    const text = row.textContent.toLowerCase();
    if (str.length && !text.includes(str)) {
      row.classList.add('hide');
    } else {
      row.classList.remove('hide');
    }
  });
}

searchElem.addEventListener('keyup', search);

thead>tr {
  background-color: lightgreen;
}

.hide {
  display: none;
}

table {
  position:relative; /* relative to all the table */
  z-index: 0;
}
td {
  line-height: 1.2em; /* the height */
  clip-path: inset(0); /* clip the pseudo element to td */
}
tbody td:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    repeating-linear-gradient(
      #CDF  0 calc(1.2em + 4px), /* height   + 2*border-spacing */
      #DEF  0 calc(2.4em + 8px)  /* 2*height + 4*border-spacing */
    ); 
}

Name	Amount
Apple	220
Watermelon	465
Orange	94
Pear	567
Cherry	483
Strawberry	246
Nectarine	558
Grape	535
Mango	450
Blueberry	911
Pomegranate	386
Carambola	351
Plum	607
Banana	292
Raspberry	912
Mandarin	456
Jackfruit	976
Papaya	200
Kiwi	217
Pineapple	710
Lime	983
Lemon	960
Apricot	647
Grapefruit	861
Melon	226
Coconut	868
Avocado	385
Peach	419