CSS輸入（按鈕）邊框特定性

據我所知，類應該優先於元素樣式的樣式。我嘗試過設計button,input[type=button]和input[type=submit]的樣式，並注意到使用input（button和submit）時，元素的border樣式優先於該類的border樣式。但是，我沒有注意到這種行爲，但在button元素上。CSS輸入（按鈕）邊框特定性

這裏的an example證明的情況：上述

<!DOCTYPE html> 
<html> 
<head> 
    <title>Page Title</title> 
    <style> 
     input[type=button], button { 
      border: none; 
     } 

     .class { 
      border: 1px solid red; 
     } 
    </style> 
</head> 
<body> 
    <input type="button" class="class" value="With class" /> 
    <input type="button" value="Without class" /> 
    <button class="class">With class</button> 
</body> 
</html>

呈現這樣的：

我注意到在Safari，火狐和Chrome相同的行爲。

我做錯了什麼？我是否誤解了這種情況下的特異性？這僅限於border嗎？

來源

2012-01-25 alexcoco

你沒有比較蘋果和蘋果。屬性選擇器與類一樣具有0,1,0的特異性。但元素選擇器的特異性爲0,0,1，這使得您的第一個選擇器input[type="button"]的特異性爲0,1,1，其大於0,1,0。

http://www.w3.org/TR/CSS2/cascade.html#specificity

如果你想他們都具有相同的特異性，你應該使用：

input.class 
input[type="button"]

- 或 -

.class 
[type="button"]

來源

2012-01-25 15:38:00 zzzzBov

添加[例子比較'蘋果蘋果']（http://jsfiddle.net/JVNZv/5/），也許？（編輯：添加更好的例子） – 0b10011

謝謝！我不知道屬性選擇器比元素選擇器有更高的特異性，我的不好！ – alexcoco

屬性選擇器+的元素選擇有比簡單的類選擇器更高的特異性。

可能的解決辦法：

.class, .class[type] { 
    border: 1px solid red; 
}

這種方式，您可以將類「類」與指定的類型的任何元素，實現你想要的結果。

來源

2012-01-25 16:07:28 Rodrigo

CSS輸入（按鈕）邊框特定性

回答

相關問題