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）

所以，有两个问题：

是否有可能做我在这里尝试做的事情 - 覆盖继承的特征？
是否可以简单地将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

Answer 2

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

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

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

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

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

2 个答案: