CSS继承 - 为什么"后来"声明被"早先"声明覆盖？

Question

我是新手html,CSS但通过最近的工作,我一直在做,我以为我已经掌握了CSS的工作原理......它似乎有点像Java这样的语言范围.

我的理解是,像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)

那么,有两个问题:

1. 是否可以做我在这里尝试做的事情 - 覆盖继承的特征？
2. 是否可以简单地将4个标签的每个文本垂直对齐？(这将弥补我从一个按钮是两行的丑陋外观,其余只有一个)

Answer 1

见级联.遇到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