CSSセレクタここ

Question

の優先順位は私のHTMLですDemo

input{ 
    border: 1px solid red; 
} 
.clsname{ 
    border: 1px solid blue; 
} 

しかし、これはその入力に対してred国境を行いますDemo

input[type='submit']{ 
    border: 1px solid red; 
} 
.clsname{ 
    border: 1px solid blue; 
} 

---

私はなぜ正確にはわかりませんが、セレクタの優先順位に関係していることがわかります。私はinput[type='submit']がclassnameよりも優先度が高いと考えますが、inputはclassnameよりも優先度が高くありません。

今私はinput[type='submit']のようなセレクタを持っており、クラス名を優先する必要があります。どうやってやるの？他にどんなアプローチがあり私は!importantであることを行うことができます、しかし、私が知りたい：

input[type='submit'] { } 
.clsname { /* bigger priority here */ } 

注：私はこのような何かを意味ですか？ !importantはであるため、を推奨しません。

Answer 1

それは特異性です。続きを読むhere on W3。

input[type='submit'].clsname, .clsnameセレクタを使用してください。

ここにはfiddleがあります。

Answer 2

セレクタを意図的に過度に優先すると、優先度を高く設定できます。

input[type="submit"].clsname