Question

我已经阅读了许多与此相似的其他问题，但没有发现任何涉及似乎是一个特殊问题的问题;虽然我不禁想到的不仅仅是我受到的影响。

考虑例如

<div class="magic">
    <dl>
        <dt>Foo</dt>
        <dd class="whatever">Bar
            <ul>
                <li>Baz</li>
            </ul>
        </dd>
    </dl>
</div>

CSS的位置

div.magic dd.whatever {
    text-indent: -2em;
}

我发现导致显示问题的text-indent继承了<ul> 。所以我将CSS更改为

div.magic dl > dd.whatever { ...

并且继承有增无减的＆gt;。＆lt;

通过阅读规范我可以解决的问题是，尽管CSS选择器确实指定<dd>内只有<dl>的{{1}}的直接子<div class="magic">如果已应用text-indent，则不会通过其他元素类型明确停止继承。

我只是愚蠢或者如果没有明确的说明

，这是不可能解决的

div.magic dl > dd.whatever * {
    text-indent: 0;
}

即。是唯一可以解除任何继承应用程序不受欢迎的解决方法吗？

非常感谢任何和所有的帮助;然而，<ul>中<dd>的例子并不是我必须选择做的事情，但它是在实践中出现的东西 - 我只是想修复它（因为其他人）。所以我谦卑地要求缺乏回复，表明我重写了HTML。干杯： - ）

编辑： JSFIDDLE上述示例。打开您的检查器，查看由什么继承的内容。

编辑2：虽然答案非常快，我接受了答案，但我很想知道人们可能会建议用什么纯粹的CSS技巧和克拉，以解决明显无法将选择限制为只有并且严格地说是目标元素，而不管它们是什么样的后代。

希望CSS4或CSS5能提供更多选择。

Answer 1

是的，这就是层叠样式表的概念。子节点从父节点继承样式，除非它们被更具体的规则覆盖。这些规则可以由您或浏览器的默认样式表定义。

举个例子：http://jsfiddle.net/r7R8z/

div.magic dl > dd.whatever {
    padding-left: 20px;
    font-size: 20px;
}

Baz将在font-size: 20px，但会有padding-left: 0，因为浏览器会覆盖填充，但字体大小不是。

要回答您的问题：是的，您必须覆盖默认情况下浏览器未定义的所有元素的text-indent属性。有关详细信息，请查看此answer。

如何防止子选择器失败的CSS继承？

1 个答案: