CSS特定規則

我正在使用twitter bootstrap（TB），看起來他們的CSS規則優先於他們不應該。我創造了這個小提琴，藉以說明問題：CSS特定規則

HTML

<div class="teaser"> 
    <h1 class="teaserText">Text text text <label>Label</label> Text <label>Activities</label></h1> 
</div>

CSS（加上一個外部鏈接到Twitter的引導）

div.teaser h1.teaserText { 
    font-size: 100px; 
    font-weight: 100; 
    color: black; 
    line-height: 90px; 
    font-family: "Trebuchet MS", "Arial Black", "Impact", "Arial"; 
    text-transform: uppercase; 
} 

div.teaser h1.teaserText label { 
    color: #FCCE00; 
}

從我的理解對特異性規則，爲TB中的標籤定義的規則應該只能得到1的值，因爲html選擇器的值爲1.我的類應該有一個值爲23，因爲我哈哈ve 3個html選擇器和2個類別選擇器，每個應該得到10個值。正如你可以在提琴中看到的那樣，雖然TB css定義中的標籤選擇器是優先的。

有人可以解釋我在這裏失蹤了嗎？

順便說一句，我知道我可以用！重要的標籤來解決這個問題，我只是想更好地理解CSS特異性規則。

來源

2012-12-13 Kevin

我很困惑。很明顯，第二種風格更具體，因爲它與最終的「標籤」完全相同。 – gotohales

首先我需要知道你的期望。我在小提琴中看到的是TEXT TEXT TEXT是黑色和100px尺寸。標籤和活動是正常的字體大小和黃色。即它正在拾取字體族，文本轉換和顏色。 –

「我知道我可以使用'！important'標籤來解決這個問題」 - 不是在我的代碼中你不能。「重要」也不是標籤，我認爲這不會有什麼區別。 –

僅當不同的規則針對**相同的元素（與標籤的顏色相同）時才適用特定規則，而不是在目標元素不同時（即使該元素的某些樣式會被繼承）。

您有一個stylerule應用於標籤，這是正確應用的顏色。所有其他樣式都應用於其他元素，因此當然首選直接針對標籤的TB樣式。

某些樣式是繼承的（如在您的示例中的font-size和line-height），但只要存在直接針對元素的規則，它們就會被覆蓋。 TB覆蓋您的字體大小和行高與以下規則：

label, input, button, select, textarea { 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 20px; 
}

你可以通過聲明很容易解決這個問題：

div.teaser h1.teaserText label { 
    color: #FCCE00; 
    font-size:inherit; 
    line-height:inherit; 
    /* and so on */ 
}

來源

2012-12-13 16:34:18 Christoph

「只有當不同規則指向同一元素時，特殊性規則才適用」正確。 – BoltClock

我不是你想的問題，但服用一種猜測十分清楚：

CSS特殊性決定當有兩個或多個規則對於一個給定的元素一個CSS屬性會發生什麼。

因此，鑑於此HTML：

<label class="myLabel">Hello!</label>

而這個CSS：

label { 
    color: red; 
    font-size: 24px; 
} 

.myLabel { 
    color: blue; 
}

標籤將是藍色，因爲.myLabel是一個更具體的選擇比label。

但是，標籤的字體大小也將爲24像素，因爲.myLabel塊不包含設置font-size屬性的規則。

來源

2012-12-13 16:32:10

回答

相關問題