Смущен приоритетом CSS
У меня есть два набора правил 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">×</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, описывающий приоритет (https://stackoverflow.com/a/25105841), но, похоже, он не соответствует этому. Если бы это соответствовало всему одному или всему другому, я думал, что смогу заставить это работать правильно, но теперь я просто в замешательстве.
Моя главная цель — не дать этому закончиться. Остальные цвета и прочее — это я тестирую варианты, пытаясь выяснить, что происходит и почему это не работает.
Это в Хроме.
Некоторые свойства CSS наследуются дочерними элементами. Итак, text-decoration из элемента tr влияет на элемент td.
@qrsngky, это правда, но у ребенка есть свои правила. Возможно, это одна из действительно странных особенностей работы стилей таблиц.
@Pointy - нет, речь идет о том, как текстовое оформление распространяется и накапливается.
Я могу воспроизвести то же самое с помощью div > div: ребенок не может «отменить» текстовое оформление родителя. Однако использование display:inline-block на ребенке каким-то образом делает его «отменяемым». Однако это не вариант для ячейки таблицы.
@Alohci да, я уверен, что это так, но то, как инспектор DOM показывает стили, довольно подозрительно, поскольку <td> (только с текстовым узлом) имеет явный стиль text-decoration, и браузер показывает его как активный, но это явно не работает.
Любой, кто действительно это понимает, должен добавить ответ получше, чем мой :) e: о, это прямо в документации MDN; Я думаю, что ключевым термином здесь является «текст», как и текстовые узлы в DOM. Поэтому, как только родительский элемент начинает рисовать что-то поверх текста, дочерние элементы не могут остановить это. Однако они могут добавить больше украшений. Очевидно, это не то, что я сделал много.
См. эту страницу MDN
Я вижу: «Текстовые украшения рисуются через текстовые элементы-потомки. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить украшение». Итак, может ли кто-нибудь объяснить поведение встроенного блока?
@qrsngky — Атомарные встроенные блоки, такие как inline-block (также inline-flex, inline-grid и т. д.), являются лишь исключением. Текстовое оформление просто определено так, чтобы не распространяться на них.
Я вижу, что проблема с встроенным блоком уже задавалась здесь . Это относилось к более старым характеристикам, но я нашел объяснение в новой ссылке
Точная формулировка скопирована с Drafts.csswg.org/css-text-decor-3/#line-decoration для справки: Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
В вашем классе «taskDef» есть text-decoration: line-through. Это <tr>, вся строка таблицы. Это применимо к обоим элементам <td> в таблице: слову и «X».
Теперь я не могу сказать, почему стиль ячейки не переопределяет стиль строки. Стиль явно есть (ну, без зачеркивания). Я не могу сказать ничего определенного, но если бы я делал это, я бы не делал элемент <td> «кнопкой»; вместо этого поместите в ячейку настоящий <button> и стилизуйте ее отдельно. Вероятно, потребуются некоторые другие изменения в размере шрифта и т. д.
Это странно.
редактировать: комментаторы объяснили, что речь идет конкретно о правилах text-decoration и о том, как они работают с текстовыми узлами-потомками.
Самое главное, что text-decoration не может быть унаследовано, в тестовой демонстрации ниже есть две строки, независимые друг от друга, и в вашем случае родительское text-decoration находится поверх дочернего.
<style>
div {
text-decoration: line-through
}
span {
text-decoration: underline;
}
</style>
<div>
<span>text-decoration</span>
</div>«Не может быть унаследовано» — неправильная концепция. Например, в <style> div { text-decoration: line-through } span { display: inline-block; text-decoration: inherit; } </style> <div> <span>text-decoration</span> </div> через промежуток проходит линия, хотя без text-decoration: inherit; этого бы не произошло.
@Alohci, строка, которую вы смотрели, получена не из диапазона, а из div, даже если содержимое находится в диапазоне, а не в div.
Если вы попробуете это <div style = "text-decoration: line-through"><span style = "margin:10px;display:block;text-decoration:none">abc</span><span>cde</span></div>, то увидите, что это не одна строка от родителя, а две строки, по одной для каждого дочернего элемента. Если вы измените «block» на «inline-block», то линия будет только у одного дочернего элемента.
@qrsngky, да, вы правы, так вы имеете в виду, что «встроенный блок» влияет на «оформление текста»?
По сути, «встроенный блок» предотвращает распространение текстового оформления на дочерние элементы. Но если вы также используете «text-decoration: inherit», тогда text-decoration может повлиять на детей.
Цитата из ссылки MDN:
Текстовые украшения рисуются по дочерним текстовым элементам. Это означает, что если элемент определяет текстовое оформление, то дочерний элемент не может удалить это оформление.
Таким образом, даже несмотря на то, что ваш элемент <td> указывает text-decoration: none, на текст внутри <td> по-прежнему влияет text-decoration элемента <tr>.
Однако согласно этой спецификации:
Обратите внимание, что текстовые украшения не распространяются ни на каких-либо потомков вне потока, ни на содержимое атомарных потомков строчного уровня, таких как строчные блоки и строчные таблицы.
Поэтому обходной путь — добавить элемент inline-block. Например, мы можем использовать элемент span и оформить его как встроенный блок. А поскольку в пролете нет ничего особенного, размеры остальных элементов остались прежними.
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"><span>×</span></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-color: aqua;
color: yellow;
background-color: blue;
}
.toDoDeleteButton > span{
display: inline-block;
}<div id = "toDoList"></div>Я обнаружил, что вам даже не нужен .toDoDeleteButton > span {text-decoration: none;}.
Украшение текста не распространяется на диапазон, если вы не укажете text-decoration: inherit как для td, так и для диапазона.
Другой способ решить эту проблему — добавить дополнительный класс.
Чтобы объяснить список приоритетов, qrsngky уже сказал, что «дочерний элемент не может удалить украшение родительского».
Я просто хочу добавить к его ответу второе решение, которое лучше сработало в моем случае:
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 class = "task" onclick = "checkOffToDo('${k}')" id = "${k}-td" border=none > ${k}</td>
<td onclick = "removeToDo('${k}')" class = "toDoDeleteButton">×</td>
</tr>`
}
toDoElements += "</table>";
document.getElementById("toDoList").innerHTML = toDoElements;#toDoList { width: 200px; font-size: 3rem; }
.taskChecked .task{
text-decoration: line-through;
}
.taskChecked {
text-decoration-color: violet;
color: purple;
background: orange;
}
.toDoDeleteButton {
border: none;
width: 8%;
height: auto;
text-decoration-color: aqua;
color: yellow;
background-color: blue;
}<div id = "toDoList"></div>
Каких именно применяемых правил вы не ожидаете?