Question

我试图找到答案，但没有直截了当，不是在StackOverflow或任何教程上。

因此，我想说我有外部CSS文件，并在那里定义了类：

.someclass
{
    color: blue;
    margin: 10px
    text-align: center;
    font-size: 20px;
}

我有一些页面，我想覆盖这个类的一个或多个属性，但保持其他所有属性相同页面包含此外部CSS文件在<head>标记内部之后，我将此定义覆盖了一个属性：

<style>
    .someclass
    {
        color: green;
    }
</style>

解析所有内容后，.someclass的最终内容是什么？这样：

.someclass
{
    color: green;
}

或者这个：

.someclass
{
    color: green;
    margin: 10px
    text-align: center;
    font-size: 20px;
}

Answer 1

这是后者。级联分辨率基于每个属性。如果color属性存在于具有更高优先级的位置（在本例中为内部样式表），则该属性将级联到更先例的属性。其余的属性继续存在，因为不存在先前的声明。

有趣的是，CSS2.1 spec似乎在第6.4节中混淆了“样式规则”和样式声明。这可能是混乱的根源。 6.4.1小节仅通过引用财产声明来澄清这一点。

Answer 2

当您有两个具有相同选择器的样式规则时，文档稍后出现的规则将获胜。因此，如果您的<link>代码位于<style>代码之前，则会应用<style>代码中规则的属性。

演示：

p {
  font-weight: bold;
  color: green;
}
p {
  font-family: sans-serif;
  color: blue;
}

<p>I am blue, not green.  I am also both bold and sans-serif!</p>

事实上，选择器无需相同即可应用。如果它们具有相同的specificity，则稍后定义的规则将获胜。例如，如果元素定义了两个类：

.a {
  width: 100px;
  padding: 8px;
  color: white;
  background-color: red;
}
.b {
  height: 75px;
  font-family: sans-serif;
  background-color: green;
}

<div class="a b">I am green!</div>

或者，对于具有多个祖先元素的元素和使用descendant combinator ()的规则：

html span {
  font-style: italic;
  color: orange;
}
body span {
  text-decoration: underline;
  font-family: sans-serif;
  color: navy;
}

<span>I'm navy!</span>

或者，对于应用了多个伪类的元素。我可以看到这个绊倒了一个人：

a:hover {
  text-decoration: overline;
  color: orange;
}
a:link, a:visited {
  font-family: sans-serif;
  color: green;
}

<a href="#orange">I'm a link that doesn't change color when hovered</a>

Answer 3

这不是必要的真正的Gilly3 ......它将取决于规则的特殊性，它还取决于你是否使用了重要的旗帜......你肯定会继承前任但你赢了必要的覆盖它......

这里有一个示例，请看结果： http://jsfiddle.net/leojavier/xg4fffms/1/

<p class="text">Testing</p>
<p class="textb">Testing</p>
<p class="forceYellow textb">Testing</p>

CSS

body{
    background:#CCC;
}
body p.text {
    color:red;
}
.textb {
    color:purple;
}

p{
    color: blue;
}

.forceYellow {
    color:yellow !important;
}

CSS类覆盖属性行为

3 个答案: