css - タグ名で設定したCSSを削除

Question

私はこれを持っています：

input[type=button]{ a LOT of stuff } /* File 1 */
.btn {what I actually want to use} /* Twitter bootstrap */

<input type="button" class="btn">

ただし、入力は TB ではなく File1 からスタイルを取得します。最初のスタイリングを無視するには?

詳細については編集してください。追加したいクラスは、Twitter Bootstrap CSS からのものです。.btn とそのバリアント (.btn-primary、.btn:hover、.btn-primary:hover) のすべての場所を変更したくありません。ほぼ 200 あり、それぞれに多くのアイテムがあります。これらの行のそれぞれに !important を追加することは、私が避けたいことです。ファイル全体が重要であることをhtmlに伝えたいです。

編集＃2： Maaaaaaaaaaybe答えを見つけました：http://thingsinjars.com/post/360/scoped-style/たぶん、今テストするからです。

Answer 1

danpの答えに加えて、IDはクラスよりも優先されます。このため、次のように変更してみてください。

<input type="button" id="btn">

#btn {
/*css rules*/
}

Answer 2

CSS は階層的です。最も具体的に定義されたルールが使用されることに注意してください。

IE: ボタンがいくつかの div 内にある場合、親階層を含むスタイルを定義します。より具体的であるため、それが適用されるルールです。

.btn {
   // base rules
   width: 80px;
   color: black;
}

.parent .block .user-form .btn {
   // my rules defined here will override anything set in .btn, and also pick up the base styles
   width: 100px;

}

したがって、.parent、.block などの内部の .btn は 100px 幅になりますが、基本ルールで定義されているように色は黒になります。

Answer 3

階層を強化します。例えば：

div .btn {}

body .btn {}

.container .btn {}

等

ただし、以前に設定した必要のないルールを上書きする必要があることに注意してください。

それが役立つことを願っています:)

Answer 4

試しましたか: .btn { color: #ff0000 !important; }