CSS nth-chlld hanya berfungsi pada elemen yang kelihatan?

Question

Saya tahu :nth-child sebenarnya sedang menyemak "kanak-kanak" vs "kanak-kanak kelihatan", tetapi adakah terdapat pemilih yang mengendalikan kanak-kanak yang kelihatan?

Andaikan saya mempunyai meja dan saya menetapkan baris ganjil kepada warna yang berbeza

Saya mempunyai penapis carian yang menyembunyikan baris yang tidak sepadan dengan carian. Sekarang apabila saya mencari, baris tidak lagi bertukar warna.

Sudah tentu saya boleh menambah/mengalih keluar kelas pada setiap elemen, yang pada asasnya saya sudah lakukan untuk menyembunyikan/menunjukkannya, tetapi saya fikir saya akan bertanya sama ada terdapat cara CSS untuk melakukan ini.

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

Tiada pemilih, tetapi jika anda bersedia menerima penyelesaian khusus untuk kes ini, maka anda boleh bergantung pada kecerunan seperti ini:

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