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

Answer 2

CSS 规范定义了一些“特定规则”，用于确定哪些属性会覆盖其他属性。 本文介绍了它的基础知识。

选择器 ul#tabs li a 比 a#large 更具体，因此 a#large 中的属性也在其他规则集中被忽略。

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

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