Смущен приоритетом CSS ⇐ CSS

[Anonymous]

У меня есть два набора правил CSS, применимых к ячейке таблицы. Я думал, что один набор правил будет иметь приоритет над другим, но приходится выбирать что-то из каждого. правила противоречат друг другу.
html генерируется с помощью javascript

Код: Выделить всё

const toDoArray = {
test: true,
}

var toDoElements = "";

for (var k in toDoArray) { // Loop through the object
var trS = "";
if (toDoArray[k]) {
trS = `class="taskChecked"`
}
toDoElements +=
`
 ${k}
×
`
}

toDoElements += "";

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

Код: Выделить всё

Я нашел ответ StackOverflow, описывающий приоритет (https://stackoverflow. com/a/25105841), но, похоже, это не соответствует этому.
Если бы это соответствовало всем одним или всем другим, я думал, что смогу заставить это работать правильно, но теперь я просто в замешательстве.
Моя главная цель — не довести дело до конца. Остальные цвета и прочее я тестирую, пытаясь выяснить, что происходит и почему это не работает.
Это в Chrome.

Подробнее здесь: https://stackoverflow.com/questions/782 ... precedence