CSS继承 - 为什么后面的声明被'早期'声明覆盖？

我是html和CSS的新手，但通过最近的工作，我一直在做我认为我掌握了CSS的工作原理。它看起来有点像Java这样的语言的作用域。CSS继承 - 为什么后面的声明被'早期'声明覆盖？

我的理解是，像Java一样，最窄范围的声明会胜出。也就是说，最具体的声明会覆盖它的继承版本，允许您像我试图做的那样为一个组声明一个设置模式然后如果其中一个需要稍微不同的设置，则可以简单地覆盖该项目的一般规则。然而，我感觉这不是这种情况，在这里我有一个我正在处理的选项卡式内容框;

的html：

<div id="feature-tabs"> 
    <ul id="tabs"> 
     <li><a href="#What We Do">What We Do</a></li> 
     <li><a id="large" href="#What Makes Us Different">What Makes Us Different</a></li> 
     <li><a href="#Our Background">Our Background</a></li> 
     <li><a href="#Why We Do It">Why We Do It</a></li> 
    </ul> 
</div>

我当然标有一个列表项为“大”，这样我可能会迫使其宽度要宽一些，因此它可以在一行和。

的CSS：

ul#tabs li a { 
    width: 144px;   //TRYING TO OVERRIDE THIS DECLARATION 
    height: 33px; 
    color: #42454a; 
    background-color: #fff; 
    border-left: 1px solid #000; 
    border-right: 1px solid #000; 
    text-decoration: none; 
    display: block; 
    text-align: center; 
    border-radius: 3px; 
} 
    a#large { 
     width: 155px;   //WITH THIS ONE 
     display: block; 
    }

正在发生的事情是，a"large"宽度是由a覆盖。（144px不是155px）

于是，两个问题：

是否有可能做什么，我想在这里做的，覆盖继承的特质？
是否可以简单地垂直对齐每个4选项卡的文本要居中？（这将弥补我从一个按钮获得的丑陋外观，其中两条线，其余仅为一条）

来源

2012-01-31 Alex

见Cascading。遇到CSS的顺序仅用作最后的手段。

两个选择器都具有相同的媒体类型。

这两个选择器具有相同的重要性和起源。

您选择的特异性是不同的

ul#tabs li a   a=0 b=1 c=0 d=3 
a#large    a=0 b=1 c=0 d=1

顶一个更具体的，所以它是会习惯的人。

但是，如果您使用ul#tabs li a#large，它将被选中，因为它具有最高的特异性。

ul#tabs li a#large a=0 b=2 c=0 d=3

来源

2012-01-31 21:00:59 ikegami

CSS规范定义了一些“特殊性规则”，用于确定哪些属性覆盖其他属性。 This article涵盖了它的基础知识。

选择器ul#tabs li a比a#large更具体，因此忽略同样在另一个规则集中的a#large的属性。

一种解决方法是使用!important：

a#large { 
    width: 155px !important; // !important gives this property precedence 
    display: block; 
}

来源

2012-01-31 20:59:22 fivedigit

CSS继承 - 为什么后面的声明被'早期'声明覆盖？

回答

相关问题