html - CSS 继承 - 为什么 'later' 声明被 'earlier' 声明覆盖？

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

参见 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