Линейный проход не может быть удален в подсписке

Следующий код показывает два вложенных списка. Внешний с текстовым оформлением: свойство сквозной передачи, а другой без линии. Как я могу удалить эту внутреннюю линию или применить ее в первую очередь?!! Я хочу, чтобы сквозной текст на слове "внешний", но не "внутренний"

    <DOCTYPE html>
<header><style>
ol li {text-decoration:line-through; color:red;}
ol li ul li{text-decoration:none; color:pink;}

</style></header>
<body>
    <ol>
        <li>Outter
            <ul>
                <li>
                    Inner
                </li>
            </ul>
        </li>
    </ol>
</body>

Ответ 1

Вы можете использовать display: inline-block, чтобы избежать цветового оформления родителя, влияющего на его дочерние элементы.

Демо

Это работает, потому что в соответствии с спецификациями,

При указании или встроенный элемент, он влияет на все поля, созданные этим элементом, и далее распространяется на любые ящики блочного уровня в потоке, которые разделяются (см. раздел 9.2.1.1). Но в CSS 2.1 это undefinedнезависимо от того, распространяется ли декорация на таблицы уровня блока. Для блока контейнеры, которые создают встроенный контекст форматирования, декорации распространяются на анонимный встроенный элемент, который обертывает все входящие в поток дочерние элементы блочного контейнера. Для всех другие элементы распространяются на любых детей в потоке. Обратите внимание, что текстовые декорации не распространяются на плавающие и абсолютно позиционированные потомки, или содержимое атомного встроенного уровня потомки, такие как встроенные блоки и встроенные таблицы.