Question

如何防止元素继承父元素的维度？示例HTML

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Problem</title>
        <style type="text/css">
            .main li a {
                height: 80px;
                width: 150px;
                background: #ff00ff;
                margin-bottom: 1px;
                display: block;
            }
            .sub li a {
                display: block;
                background: #00ff00;
            }           
        </style>
    </head>

    <body>
        <div>
            <ul class="main">
                <li>
                    <a>Item 1</a>
                    <ul class="sub">
                        <li><a>Subitem 1 - this should not inherit height of 80px</a></li>
                        <li><a>Subitem 2 - this should not inherit height of 80px</a></li>
                    </ul>
                </li>
                <li><a>Item 2</a></li>              
            </ul>
        </div>
    </body>
  </html>

.sub li a继承了.main li a的宽度和高度，我不知道为什么。我必须设置外部li的宽度和高度，但内部li应根据需要具有宽度和高度。我可以通过使用float：none取消设置继承的float，但我不知道如何重置指定的维度，以便它们不适用于子元素。

Answer 1

我认为您的li是display: block元素？在这种情况下，它们并不真正继承父项的宽度，但默认情况下它们是width: 100%。

在这种情况下，我认为你不会为内部li设置明确的宽度。

Answer 2

那不是继承。选择器.main li a同样适用于具有a类的元素内li内的所有 main标记。您要求的是此规则不适用。三个建议。

选项1：将第一个CSS选择器更改为：

.main li > a

这意味着“只有li的直接子项标签”。但是，在旧浏览器上支持此语法并不是很好。

选项2：添加“height：auto;”到.sub CSS规则。同样，这将适用于较新的浏览器，但较旧的浏览器不一定能正确实现它。

选项3：将类添加到第一个a标记，并将第一个CSS选择器更改为

.main li a.yourClass

这可以防止高度和其他规则应用于没有该类的任何a标记。这将适用于所有浏览器，甚至可怕的旧浏览器。

如何覆盖继承的维度？

2 个答案: