如何仅修改表格中含小数点的td元素的CSS样式（无法使用ID/类）

先分析你之前的方法问题 #

• 方法一：固定nth-child(7)仅对特定列有效，小数点位置变化后就失效，不具备通用性；
• 方法二：div[title~="."]选择器完全匹配不到目标元素，因为你的小数点不在带title属性的div中；
• 方法三：使用了预处理器（如Sass）的嵌套语法，但原生CSS不支持这种写法，导致样式无法生效。

纯CSS实现（现代浏览器支持） #

如果你的小数点是直接作为文本存在于<td>中，或是包裹在<strong>标签内，可使用以下代码：

1. 直接选中包含小数点的<td>

/* 匹配包含小数点文本的<td> */
tbody > tr > td:contains('.') {
  width: 2px !important;
  padding: 0 !important;
}

/* 若小数点在<strong>标签内，用这个更精准 */
tbody > tr > td:has(strong:contains('.')) {
  width: 2px !important;
  padding: 0 !important;
}

注意：:contains()和:has()需Chrome 101+、Firefox 121+等现代浏览器支持。

2. 选中小数点所在的整列

如果单个<td>宽度设置不生效（表格列宽联动），需要给整列设置样式，纯CSS无法直接动态定位列序号，推荐使用下方JavaScript方案。

兼容旧浏览器的JavaScript方案 #

如果要兼容不支持新CSS选择器的浏览器，用JS实现更可靠：

// 筛选所有包含小数点的<td>
const decimalCells = Array.from(document.querySelectorAll('tbody tr td'))
  .filter(cell => cell.textContent.includes('.'));

decimalCells.forEach(cell => {
  // 获取该<td>的列序号（从1开始）
  const colIndex = Array.from(cell.parentElement.children).indexOf(cell) + 1;
  // 给整列的所有<td>设置样式
  document.querySelectorAll(`tbody tr td:nth-child(${colIndex})`)
    .forEach(colCell => {
      colCell.style.width = '2px';
      colCell.style.padding = '0';
    });
});

内容的提问来源于stack exchange，提问作者Ashmita Singh