3

以下代码显示有两个嵌套列表。外面的一个带有 text-decoration:line-through 属性，另一个没有 line-through 。我怎样才能删除这个内部线路或不首先应用它？！我想要“外部”这个词而不是“内部”这个词

    <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>
4

1 回答 1

13

您可以使用display: inline-block来避免父级text-decoration影响其子级。

演示

它之所以有效，是因为根据规范，

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

于 2013-10-22T22:05:20.280 回答