无法在子列表中删除直通

db-*_*ser 3 html css

以下代码显示有两个嵌套列表.外部文本装饰:直通属性,另一个没有直通.我怎样才能删除这个内部直通线或者不首先应用它?!! 我希望在"外部"这个词上划线,而不是"内在"

    <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>
Run Code Online (Sandbox Code Playgroud)

Ori*_*iol 6

您可以使用display: inline-block以避免父母text-decoration影响其子女.

演示

这是有效的,因为根据规格,

当在内联元素上指定或传播到内联元素时,它会影响该元素生成的所有框,并进一步传播到拆分内联的任何流内块级框(参见第9.2.1.1节).但是,在CSS 2.1中,未定义装饰是否传播到块级表中.对于建立内联格式化上下文的块容器,装饰将传播到匿名内联元素,该元素包装块容器的所有流入内联级子级.对于所有其他元素,它将传播给任何流入的子元素.请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.