0

ページ上のテキストタイプのすべての入力に対してCSSスタイルを定義しています。ページの一部でSpectrumColorChooserを使用していますが、これはを使用してページに実装されています。

<input type="text" class="basic" />

以下を使用して、テキストタイプのすべての入力に適用した「グローバル」スタイルをオーバーライドしようとしていますが、機能していません。

input[type=text]:not([class=basic]), select {
    height:28px;
    border:1px solid #c5d1db;
    padding-left:5px;
    padding-right:5px;
    color:#627686;
    font-size:13px;
    box-shadow:inset 0 4px 5px 0 #ebebeb;
    margin:0;
}

これをオーバーライドする方法はありますか？

4

3 に答える 3

4

私は本当にここで問題を見ることができません、これはCSSの特異性のポイントではありませんか？ http://jsfiddle.net/calder12/GBH8b/

input[type=text]{
height:28px;
border:1px solid #c5d1db;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
box-shadow:inset 0 4px 5px 0 #ebebeb;
margin:0;
}

input[type=text].basic{
height:18px;
border:1px solid #000;
padding-left:5px;
padding-right:5px;
color:#627686;
font-size:13px;
margin:0;
}
于 2012-12-10T18:25:18.427 に答える
1

投稿されたCSSコードは機能し、クラスにないフィールドに影響を与え、ブラウザーをサポートします（一般に最新のブラウザーを含みますが、古いIE 8は除きます）。

明らかに、クラス内のフィールドには影響しません。ただし、すべての入力フィールドに適用される既存のルールをこのより制限されたルールに置き換えると、違いが生じます。

于 2012-12-10T18:34:32.180 に答える
-1

!importantメインを上書きするので、宣言するだけです。

input[type=text]:not([class=basic]), select {
    height:28px !important;
    border:1px solid #c5d1db;
    padding-left:5px;
    padding-right:5px;
    color:#627686;
    font-size:13px;
    box-shadow:inset 0 4px 5px 0 #ebebeb;
    margin:0;
}
于 2012-12-10T18:20:42.210 に答える