1

問題:不要なボタン スタイルを指示するスタイルシートを含む 既存のリソース依存関係(ビルドから変更または削除することは許可されていません) 。このスタイルシートがページのボタン スタイルに与える影響をどうにかして克服したいと考えています。

質問: 独自のローカル スタイルシートを使用して、Windows のデフォルトの CSS ボタン スタイル (背景、形状、テキスト) に戻すにはどうすればよいですか? -css属性がどうあるべきかなどがわからない（「！重要」句などを使用する必要があると思います）

4

3 に答える 3

3

各ブラウザーには、独自の既定の CSS 規則のセットがあります。上記のスタイルに一致するように最善を尽くす IE を明示的に参照しない限り、「Windows」CSS はありません。好みのブラウザのデフォルトを見つけて新しい CSS の後に追加し、デフォルトのテーマに戻す必要があります。

いくつかの一般的なブラウザーの既定のスタイル:

于 2012-12-13T16:11:34.117 に答える
2

使用しないでください!important

代わりに、ボタンのスタイルをより具体的に定義し、ボタンに望ましい外観を与えます。したがって、元のスタイルシートにある場合

button { ... }

次に、スタイルシートで

#parent button { ...  }
于 2012-12-13T16:13:06.770 に答える
1

!important は使用しませんし、使用すべきではありません。CSS の特異性と継承の原則に従って適切にオーバーライドする必要があるだけです。

CSS継承の説明

たとえば、「不要な」ボタンのスタイルが次のようなものであるとしましょう。

<input type="button" class="unwanted" />

そして、(編集不可の) スタイルシートに CSS があります:

.unwanted {
fooRule: whatever;
barRule: whatever;
}

継承を使用すると、独自の外部スタイルシートを作成するだけで済みます。覚えておくべきこと：

（1）「不要な」スタイルシート参照を含む既存のものの下に配置する必要があります。継承は、外部スタイルシートを順次処理します。これは、「最も近いルールが勝つ」という原則に従います。(2) CSS ルールを記述する方法は、現在不要なスタイルを適用しているルールよりも具体的でなければなりません。繰り返しますが、上記のリンクはこれを説明するのに本当に役立ちます。

前の例に戻ると、不要なスタイルは単に「不要な」クラスによって適用されています。HTML を編集せずにルールをオーバーライドできます。あるいは、HTML を編集することもできます。それはあなた次第です。また、ボタンのスタイルにどの程度グローバルに影響を与えたいかによっても異なります。

「不要な」クラスを持つすべてのボタンにグローバルに影響を与えたい場合は、次のようにします。

input[type='button'] .unwanted {
fooRule:override;
}

不要なスタイルを持つボタンの一部のみを変更したい場合は、代わりに次のようにします。

.unwanted.newRule {
fooRule:override;
}

次に、HTML を次のように変更します。

<input type="button" class="unwanted newRule">

.unwanted.newRule は、不要と newRule の両方のクラスを持つ「要素」にのみ影響することを意味することに注意してください。不要なスタイルが次のように設定されている場合、何も変更されません。

<form class="unwanted">
    <input type="button" class="newRule" />
</form>

.unwanted.newRule である理由は、「両方のクラスが同じ要素にある」ことを意味します。次のように変更します。

.unwanted .newRule {foo}

つまり、私のポイントは、CSS の特異性と継承を正しく利用し、!important を使用せずにやりたいことを実行する、意味的に正しい方法がたくさんあるということです。

補足として、!important を使用する必要がある唯一の理由は、HTML 要素に 'style' 属性を書き込む JavaScript を使用して実際にボタンをスタイリングする CSS が適用されている場合です。その場合、(1) その JS を使用しないでください。これは、JS を使用してスタイリングするための恐ろしい方法です。(2) !important を使用して、JS によって適用されるインライン スタイルをオーバーライドする必要があります。繰り返しますが、これはカスケードの仕組みによるものです。この場合、CSS は (1) ブラウザー (ユーザー エージェント)、(2) 外部 CSS、(3) 内部「ヘッド」CSS、(4) 内部インライン CSS、 (5) 作成者の !important 宣言、(6) ユーザーの !important 宣言。

于 2012-12-13T16:28:56.860 に答える