2

ラジオボタンを揃えようとしています。それらは次のように実装されます。

<input type="radio" name="type" class="radv" value="0" />

ローカル ファイル ヘッダーで定義されているスタイルは次のとおりです。

<style>
input.radv
{
    vertical-align:middle;
    margin:0px;
    padding-bottom:4px;
}
</style>

そして、これが私の外部CSSファイルの競合するスタイルです:

input:not([type=submit]):not([type=file]):not([type=image]) {
 border: 1px solid #e1e1e1;
 background-color:#fff;
 padding:2px;
 height:18px;
}

どういうわけか、外部の「入力」スタイルが優先されています。外部 CSS ファイルよりもローカル スタイルを優先すべきではありませんか?

4

2 に答える 2

5

外部スタイルシートのルールが優先される理由は、具体性です。内部で定義されている<style>かどうかは関係ありません。

それ:not()自体はセレクターに重みを与えませんが、内部の各属性セレクターはクラスと同じ重みを与えます。

input.radv1 つの要素セレクター(0,0,1)と 1 つのクラス(0,1,0)のため、合計の重みは(0,1,1)になります。

input:not([type=submit]):not([type=file]):not([type=image])1 つの要素セレクター(0,0,1)と 3 つの属性セレクター(0,1,0)x3があるため、合計の重みは (0,3,1)になり、優先されます。

注: 順序は、特異性がまったく同じである場合にのみ問題になります。

CSS セレクターの特異性について詳しくは、http: //coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/をご覧ください。

于 2013-08-19T09:54:06.620 に答える
1

Dipesh Parmar が言ったように、インライン/外部 CSS コードをロードする順序を確認してください。

順序を変更したくない場合...!important優先するプロパティ値の後にいつでも使用できます。

<style>
input.radv
{
    vertical-align:middle;
    margin:0px;
    padding-bottom:4px !important;/*the `important` will make sure this property applies unless there is another property with `!important` value next to this one in DOM*/
}
</style>
于 2013-08-19T09:17:14.093 に答える