CSS nth-chlld 只适用于可见元素？

Question

我知道 :nth-child 实际上是在检查“子项”与“可见子项”，但是是否有一个选择器可以处理可见子项？

假设我有一个表格，我将奇数行设置为不同的颜色

我有一个搜索过滤器，可以隐藏与搜索不匹配的行。现在，当我搜索时，行不再交替颜色。

当然，我可以向每个元素添加/删除类，我基本上已经这样做来隐藏/显示它们，但我想我会问是否有 CSS 方法可以做到这一点。

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