CSS入力（ボタン）ボーダーの特殊性

私が理解しているように、クラスはエレメントスタイルよりもスタイルに優先しなければなりません。私はスタイルbutton、input[type=button]しようとした、とinput[type=submit]とinput（buttonとsubmit）で、要素からborderスタイルがクラスのborderスタイルに優先するということに気付きました。しかし、私はこの動作を、button要素に気付かなかった。私はサファリ、Firefox、およびChromeで同じ動作を気づいたCSS入力（ボタン）ボーダーの特殊性

：次のようにレンダリングする上記

<!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>

：ここ

は状況を実証an exampleです。

何か間違っていますか？この場合、私は特異性を誤解していますか？これは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入力（ボタン）ボーダーの特殊性

答えて

関連する問題