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

回答