選擇器的CSS優先級超過類

.formWrap input[type="text"] { 
    font-size: 12px;  
} 

.bigger { 
    font-size: 14px 
} 

<div class="formWrap"> 
    <input type="text" class="bigger" /> 
</div>

爲什麼上述內容不能輸入字段14px的文本？選擇器的CSS優先級超過類

當我使用input[type="text"]選擇器時，我該如何鎖定formWrap的孩子？

有沒有更好的方法給我所有的輸入一個特定的風格，然後能夠調整某些輸入（希望基於一個類）？

來源

2014-09-23 Kline

第一個選擇器比.bigger類具有更高的特異性。

爲了增加.bigger類的特殊性，你可以這樣做：

.formWrap input[type="text"]{ 
     font-size: 12px; 
} 

.formWrap input[type="text"].bigger{ 
     font-size: 14px 
}

OR（並不推薦）：

.bigger{ 
font-size: 14px !important; 
}

來源

2014-09-23 13:08:54 HaukurHaf

好吧，似乎工作 – Kline 2014-09-23 13:11:46

答案是Specificity。

您的第一個選擇器比第二個選擇器具有更高的特異性，因此其屬性具有優先級。

.formWrap input[type="text"]包含類，一個元件和屬性選擇器。根據CSS選擇器規範（以上鍊接），此選擇器的特異性爲21. .bigger另一方面僅具有類別選擇器，因此僅具有10的特異性。21大於10.

從MDN：

特異性是由瀏覽器決定哪些屬性值是最相關的元素，並得到要被施加的裝置。特定性僅基於由不同種類的選擇器組成的匹配規則。
input.bigger {} /* 11 */ 
你甚至可以重複相同的選擇：

在你的情況，一個簡單的方法讓你的第二選擇，以在第一是通過增加此選擇具有相同或更高的特異性優先多次（如說明書中還指出）：

input.bigger.bigger {}    /* 21 */

注意，如果同時選擇的特異性相等，則選擇包含在你的樣式表以後會一個優先。

來源

2014-09-23 13:06:54

你可能解釋爲什麼它具有較高的特異性（因爲有一類+一個孩子選擇）與只是一個類選擇。 – enguerranws 2014-09-23 13:07:58

好吧，但我怎麼可以去關於樣式特定的輸入框類型的已經由一般輸入樣式的樣式？ – Kline 2014-09-23 13:08:56

@Kline查看我編輯的答案。 – 2014-09-23 13:13:17

上有特異性和好的文章如何在這裏計算。首次開始寫入CSS時需要一段時間才能點擊的東西。

計算CSS具體數值 http://css-tricks.com/specifics-on-css-specificity/

來源

2014-09-23 13:10:22 jdunham

選擇器的CSS優先級超過類

回答

相關問題