困惑于CSS优先级：表格单元格样式为何未按预期覆盖？

问题原因 #

你遇到的删除线无法去除的核心问题，不是CSS优先级冲突，而是**text-decoration属性的特殊传播机制**：

• 你给<tr>标签添加了.taskChecked类，其中的text-decoration: line-through会直接作用于该行内的所有文本内容，包括删除按钮所在的<td>。
• text-decoration不属于继承属性，父元素的文本装饰会“延伸”覆盖子元素的文本区域，所以即使给.toDoDeleteButton设置text-decoration: none !important，也无法抵消父元素的装饰效果。

解决方案 #

方案一：精准定位样式目标（推荐） #

把.taskChecked类直接应用到任务名称的<td>，而非整个<tr>，从根源避免样式扩散：
修改JavaScript代码：

const toDoArray = {
  test: true,
}

var toDoElements = "<table style=\"width: 100%;\">";

for (var k in toDoArray) { 
  var tdS = ""; // 把原trS改为tdS，作用于第一个td
  if (toDoArray[k]) {
    tdS = `class="taskChecked"`
  }
  toDoElements +=
    `<tr id="${k}-tr">
      <td onclick="checkOffToDo('${k}')" id = "${k}-td" ${tdS} border=none > ${k}</td>
      <td onclick="removeToDo('${k}')" class="toDoDeleteButton">&times;</td>     
    </tr>`
}

toDoElements += "</table>";

document.getElementById("toDoList").innerHTML = toDoElements;

方案二：阻断文本装饰传播 #

如果必须给<tr>设置样式，给删除按钮的<td>添加display: inline-block，让它形成独立的文本上下文，阻断父元素的装饰延伸：
修改CSS代码：

.toDoDeleteButton {
  border: none;
  width: 8%;
  height: auto;
  display: inline-block; /* 新增该行，阻断文本装饰传播 */
  text-decoration: none;
  color: yellow;
  background-color: blue;
}

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