Как я заставляю это переопределение художественного оформления текста CSS работать?

Ответ okw выше прекрасно объясняет, почему вы не можете делать то, что просите, без некоторых других изменений. Нет, вы не сойдете с ума!

Возможные обходные пути:

• попробуйте border-bottom ?
• оберните текст, который вы хотите подчеркнутым, в span class = "u" тег? (чтобы предотвратить украшение вложенных элементов текстовым оформлением)
• , если вы не можете изменить разметку, вы можете добавить скрипт для выполнения того же самого, что и мое предыдущее предложение.

Удачи!

Причина, по которой вы видите то, что видите, заключается в том, что ваше правило

ul > li.u

имеет приоритет над:

ul > li > ul > li

, поскольку класс указан и который имеет больший вес, чем селекторы элементов вместе .

Изменить: Вы можете попробовать:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

и поиграйте с этим (возможно, вам придется использовать li.u вместо просто .u

Однако , в зависимости от содержимого, вы можете заключить подчеркнутые части в теги q , em или strong и стилизовать их. теги вместо использования класса. Таким образом вы будете описывать свой контент, а также стилизовать его.

.u {text-decoration: underline;}