如何覆盖继承的维度？

问题描述：

如何防止元素继承父元素的维度？例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的宽度和高度，但内部li应该根据需要设置宽度和高度。例如，我可以通过使用float：none来取消继承的float，但我不知道如何重置指定的维度，以便它们不适用于子元素。

答

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

我不认为你会得到周围设置一个明确的宽度在这种情况下，内li。

我已经做了一个小例子，所以你可以看到有什么问题。我已经定义了.main li a的高度，但我不明白为什么.sub li a会继承它的任何一个！ – 2010-11-22 22:48:19

答

那不是继承。选择.main li a适用与main类元素中同样以的li内的所有a标签。你所要求的是这个规则不适用。三点建议。

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

.main li > a

这意味着“只是一个标签，其是li的直接子”。但是，在旧版浏览器上支持这种语法并不好。

选项2：添加“height：auto;”到.sub CSS规则。再次，这将在较新的浏览器上工作，但旧版浏览器不一定能正确实现。

方案三：一类添加到第一a标签，并改变第一CSS选择器

.main li a.yourClass

这可以防止高度和申请没有任何a标签的其他规则班上。这在所有浏览器中都能正常工作，甚至可怕的是旧的浏览器。

如何覆盖继承的维度？

相关推荐