基于CSS :has()和属性选择器实现表格单元格背景色动态化（非实时）

<main>
  <aside>
    <p>Does your browser claim to support :has() selector: <span class="claimsSupport"></span></p>
  </aside>
  <section>
    <button>colour <table> with <span data-use="JavaScript"></span></button>
    <table>
      <tbody>
        <tr>
          <td><input type="number" value="0.91"></td>
          <td><input type="number" value="0.84"></td>
          <td><input type="number" value="0.70"></td>
          <td><input type="number" value="0.52"></td>
        </tr>
        <tr>
          <td><input type="number" value="0.52"></td>
          <td><input type="number" value="0.23"></td>
          <td><input type="number" value="0.25"></td>
          <td><input type="number" value="0.79"></td>
        </tr>
        <tr>
          <td><input type="number" value="0.01"></td>
          <td><input type="number" value="0.19"></td>
          <td><input type="number" value="0.34"></td>
          <td><input type="number" value="0.20"></td>
        </tr>
        <tr>
          <td><input type="number" value="0.66"></td>
          <td><input type="number" value="0.48"></td>
          <td><input type="number" value="0.65"></td>
          <td><input type="number" value="0.62"></td>
        </tr>
      </tbody>
    </table>
  </section>
</main>

/* 基础样式，省略部分 */
table {
  border-collapse: collapse;
  margin-inline: auto;
}

td {
  border: 1px solid currentColor;
  padding-block: min(0.5rem, var(--spacing));
  padding-inline: var(--spacing);
}

/* 根据input的value属性设置td的背景色 */
table:not(.js) td:has(input[value^="0.0"]) {
  background-color: hsl(0deg 70% 55% / 1); /* 例如，红色系 */
}

table:not(.js) td:has(input[value^="0.1"]) {
  background-color: hsl(36deg 50% 75% / 1); /* 例如，橙色系 */
}

table:not(.js) td:has(input[value^="0.2"]) {
  background-color: hsl(72deg 70% 55% / 1); /* 例如，黄色系 */
}

table:not(.js) td:has(input[value^="0.3"]) {
  background-color: hsl(108deg 50% 75% / 1); /* 例如，浅绿色系 */
}

table:not(.js) td:has(input[value^="0.4"]) {
  background-color: hsl(144deg 70% 55% / 1); /* 例如，深绿色系 */
}

table:not(.js) td:has(input[value^="0.5"]) {
  background-color: hsl(180deg 50% 75% / 1); /* 例如，青色系 */
}

table:not(.js) td:has(input[value^="0.6"]) {
  background-color: hsl(216deg 70% 55% / 1); /* 例如，浅蓝色系 */
}

table:not(.js) td:has(input[value^="0.7"]) {
  background-color: hsl(252deg 50% 75% / 1); /* 例如，深蓝色系 */
}

table:not(.js) td:has(input[value^="0.8"]) {
  background-color: hsl(288deg 70% 55% / 1); /* 例如，紫色系 */
}

table:not(.js) td:has(input[value^="0.9"]) {
  background-color: hsl(324deg 50% 75% / 1); /* 例如，粉色系 */
}

/* 浏览器对:has()支持的检测 */
@supports selector(td:has(input[value^="0.1"])) {
  main {
    --resultColor: palegreen; /* 如果支持，改变主区域背景色作为视觉指示 */
  }
}