CSS特异性

假设这个加价：CSS特异性

<html class="fr"> 
<head> 
</head> 
<body> 
<div class="class1"> 
</div> 
</body> 
</html>

这是否会：

.fr .class1 { 
    background-color: blue; 
}

优先于此：

.class1 { 
    background-color: red; 
};

编辑：

为了那些想知道，是的，我曾尝试:)我没有解释完整的亲在这里发现这个帖子后发现了这个问题。

基本上，我曾在同一个样式表两种风格：

.fr .class1 { 
    font-size: 12px; 
} 

.class1 { 
    font-size: 12px; 
    line-height: 18px; 
    height: 80px; 
}

虽然在技术上.fr .class1需要precendence在.class1，这并不意味着该元素替换所有的.class1的样式.fr .class1的样式。相反，它首先查看.fr .class1，然后.class1。这是“明显的”，但这就是我遇到困难的原因。

我的目标是通过使用.fr .class1的优先级高于.class1来删除样式。为了做到这一点，我意识到我需要将值设置为0或中性值：

例）

.fr .class1 { 
    font-size: 12px; 
    line-height: 0; 
    height: auto; 
}

，否则会级联到.class1并填写这些样式

2011-08-28 djreed

你试过吗？最好先尝试......！ –

@Cubed：但考虑到浏览器错误的历史，最好检查一下标准，然后试着确保你关心的浏览器按照你需要的方式遵循标准。 –

在对原始帖子的修改中添加了评论。 – djreed

是，因为.fr .class1引用两个类名和.class1只引用一个，第一个更具体。 CSS标准中的规则是here。

2011-08-28 03:13:21 Douglas

是因为第一个例子有两个类名相比一个。

2011-08-28 03:15:00

在回答编辑：

CSS应用价值单独每个属性。块分组无关紧要。所以

.fr .class1 { 
    font-size: 12px; 
} 

.class1 { 
    font-size: 12px; 
    line-height: 18px; 
    height: 80px; 
}

相同

.fr .class1 { 
    font-size: 12px; 
} 
.class1 { 
    font-size: 12px; 
} 
.class1 { 
    line-height: 18px; 
} 
.class1 { 
    height: 80px; 
}

，正如.fr .class1比单独.class1更具体的，是一样的

.fr .class1 { 
    font-size: 12px; 
} 
.class1 { 
    line-height: 18px; 
} 
.class1 { 
    height: 80px; 
}

2011-08-28 07:01:57 user123444555621

正是我最终发现的。感谢您清楚地概述了这一点！ – djreed

回答