无需JavaScript，仅用CSS实现表格单元格背景色条件渲染

本教程探讨了如何在不依赖javascript的情况下，仅使用现代css特性为html表格单元格设置条件背景色。通过巧妙结合`:has()`伪类和属性选择器，可以根据单元格内``字段的初始值来改变其背景。然而，此方法在精度要求提高时，会导致css规则呈指数级增长，维护成本极高，且无法响应用户实时输入，因此在实际动态场景中存在显著局限性。

在Web开发中，根据数据动态调整元素样式是常见的需求。例如，根据表格单元格内输入字段的数值来改变其背景色。通常，这类交互性功能会依赖JavaScript来实现。然而，随着CSS标准的不断演进，一些“出血边缘”的特性也为我们提供了纯CSS解决方案的可能性。本文将深入探讨如何利用CSS的:has()伪类选择器和属性选择器，在不编写任何JavaScript代码的情况下，实现表格单元格的条件背景色渲染。

核心CSS技术：has()伪类与属性选择器

要实现纯CSS的条件样式，我们需要利用两个关键的CSS特性：

1. :has() 伪类选择器： has() 伪类允许我们选择一个元素，如果它包含一个匹配指定相对选择器的后代元素。例如，td:has(input) 会选择所有包含 <input> 元素的 <td> 元素。这是实现“父元素根据子元素状态改变样式”的核心。

2. 属性选择器 [attribute^="value"]： 属性选择器用于根据HTML元素的属性及其值来选择元素。[attribute^="value"] 这种形式表示选择属性值以特定字符串“value”开头的元素。例如，input[value^="0.5"] 会选择所有 value 属性以 "0.5" 开头的 <input> 元素。

将这两者结合起来，我们就可以构造出类似 td:has(input[value^="0.5"]) 的选择器。这个选择器会匹配所有包含一个 value 属性以 "0.5" 开头的 <input> 元素的 <td> 单元格。

实现步骤与示例

为了演示这一技术，我们将创建一个包含数字输入框的HTML表格。每个输入框的初始 value 属性将决定其所在单元格的背景色。

CreateWise AI

为播客创作者设计的AI创作工具，AI自动去口癖、提交亮点和生成Show notes、标题等

下载

立即学习“Java免费学习笔记（深入）”；

1. HTML结构： 首先，定义一个基本的HTML表格结构，其中每个 <td> 单元格都包含一个 type="number" 的 <input> 元素，并设置初始 value。

   <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>

2. CSS样式： 接下来，我们编写一系列CSS规则，为 value 属性以不同数字开头的输入框所在的单元格设置不同的背景色。这里我们使用 hsl() 颜色函数来创建一系列具有视觉区分度的颜色。

   /* 基础样式 */
   table {
     border-collapse: collapse;
     margin-inline: auto;
   }
   
   td {
     border: 1px solid currentColor;
     padding: 0.5rem;
   }
   
   input[type=number] {
     max-width: 6em;
     background-color: transparent;
   }
   
   /* 条件背景色规则 */
   /* 匹配 value 属性以 "0.0" 开头的 input 所在的 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); /* 粉色系 */
   }
   
   /* 使用 @supports 检测 :has() 支持 */
   @supports selector(td:has(input[value^="0.1"])) {
     /* 如果浏览器支持 :has()，可以进行一些视觉指示 */
     main {
       --resultColor: palegreen; /* 改变一个CSS变量，用于父级元素的背景 */
     }
   }

   请注意 table:not(.js) 的使用，这是为了演示在有JavaScript和无JavaScript两种模式下切换的场景。在纯CSS方案中，如果不需要这种切换，可以省略 :not(.js)。

局限性与注意事项

尽管纯CSS方案在某些场景下提供了不依赖JavaScript的便利，但其存在显著的局限性，使得它在大多数动态应用中并非最佳选择：

1. 静态性与实时响应问题： 此CSS方案仅能根据HTML中 <input> 元素的初始 value 属性来设置背景色。当用户在输入框中实时更改数值时，CSS无法感知并响应这些变化。CSS选择器无法监听用户输入事件，也无法动态读取DOM元素的最新属性值（除非该属性值通过JavaScript或其他方式被写入到HTML属性中）。要实现实时动态更新，JavaScript仍然是不可替代的。

2. 可扩展性挑战： 这是纯CSS方案最严重的缺点。上述示例仅针对小数点后第一位数字进行匹配（0.0到0.9），这需要10条CSS规则。如果需要更高的精度：

   • 两位小数 (例如 0.00 到 0.99)：将需要 10 * 10 = 100 条CSS规则。
   • 三位小数 (例如 0.000 到 0.999)：将需要 10 * 10 * 10 = 1000 条CSS规则。 每增加一位小数，所需的CSS规则数量都会呈指数级增长。这会导致CSS文件变得极其庞大、难以管理和维护，严重影响开发效率和网站性能。