Javascript 被CSS优先级所迷惑

发布于04月10日

我有两个css规则集应用于表的单元格.我以为一套规则会凌驾于另一套规则之上，但它是从每一套规则中挑选一些规则.规则互相矛盾.

HTML由JavaScript生成

const toDoArray = {
  test: true,
}

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

for (var k in toDoArray) { // Loop through the object
  var trS = "";
  if (toDoArray[k]) {
    trS = `class="taskChecked"`
  }
  toDoElements +=
    `<tr ${trS} id="${k}-tr">
      <td onclick="checkOffToDo('${k}')" id = "${k}-td" border=none > ${k}</td>
      <td onclick="removeToDo('${k}')" class="toDoDeleteButton">&times;</td>     
    </tr>`
}

toDoElements += "</table>";

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

#toDoList { width: 200px; font-size: 3rem; }

.taskChecked {
  text-decoration: line-through;
  text-decoration-color: violet;
  color: purple;
  background: orange;
}

.toDoDeleteButton {
  border: none;
  width: 8%;
  height: auto;
  text-decoration: none !important;
  text-decoration-color: aqua;
  color: yellow;
  background-color: blue;
}

<div id="toDoList"></div>

我发现这个StackOverflow Answer描述优先级(https://stackoverflow.com/a/25105841)，但这似乎并不符合它. 如果它遵循所有一个，或所有其他，我以为我可以得到它的工作的权利，但现在我只是真的很困惑.

我的主要目的是不要给它一条线.其余的 colored颜色和东西是我测试的选项试图找出发生了什么，为什么它不工作.

这是Chrome中的.

#toDoList { width: 200px; font-size: 3rem; } .taskChecked { text-decoration: line-through; text-decoration-color: violet; color: purple; background: orange; } .toDoDeleteButton { border: none; width: 8%; height: auto; text-decoration-color: aqua; color: yellow; background-color: blue; } .toDoDeleteButton > span{ display: inline-block; }

Javascript 被CSS优先级所迷惑

推荐答案

Javascript相关问答推荐

通过实现regex逻辑自定义数据表搜索

如何获取转换字节的所有8位？

将json数组项转换为js中的扁平

TypScript界面中的Infer React子props

IMDB使用 puppeteer 加载更多按钮(nodejs)

按下同意按钮与 puppeteer 师

在JavaScript中声明自定义内置元素不起作用

未捕获错误：[]：getActivePinia()被调用，但没有活动Pinia.🍍""在调用app.use(pinia)之前，您是否try 使用store ？""

在我的html表单中的用户输入没有被传送到我的google表单中

在拖放时阻止文件打开

优化Google Sheet脚本以将下拉菜单和公式添加到多行

更改预请求脚本中重用的JSON主体变量- Postman

在css中放置所需 colored颜色以填充图像的透明区域

如何在HTMX提示符中设置默认值？

当标题被点击时，如何使内容出现在另一个div上？

React：防止useContext重新渲染整个应用程序或在组件之间共享数据而不重新渲染所有组件

Refine.dev从不同的表取多条记录

无法在Adyen自定义卡安全字段创建中使用自定义占位符

在此div中添加一个类，并在一段时间后在Java脚本中将其删除

由于http.get，*ngIf的延迟很大