2

スタイルシートに次のルールがあります。

input:not([type='button']):not([type='submit']):not([type='checkbox']):not([type='radio']),
select {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

これは私のページのすべてのテキスト フィールドを対象としていますが、特定のクラスの要素内にある入力に影響を与えないようにする必要があります。私は ckeditor を使用しており、それが作成するダイアログ ボックスのフィールドに影響を与える必要はありません。つまり、後でルールを上書きすることはできません。

追加しようとしまし:not(.cke_editor_pageContent_dialog input)たが、明らかな理由で機能しません。どこにもこれに対する答えが見つからないようです

4

3 に答える 3

2

適切なアプローチは、「ブラックリスト」アプローチの代わりに「ホワイトリスト」アプローチを使用することです (ブラウザに何を選択しないかを伝えます)。

一つには、あなたが経験している問題を回避します。また、:not()セレクターは IE8 以下では機能しません (問題があるかどうかは不明です)。最後に (単なる推測ですが)、複雑な:notステートメントは評価にコストがかかると考えなければなりません。

問題の要素に明示的なクラス名を付けることをお勧めします。または、エディタ以外のすべての要素を要素内にラップし、それをスタイル コンテナとして使用することをお勧めします。

<div class="myStyles">
    <!-- elements that should be styled -->
    <input type="text" />
</div>

.myStyles input[type="text"]{
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}

これにはより多くのマークアップが必要になる可能性があることは承知していますが、おそらく長期的には維持が容易になるでしょう。

于 2012-04-14T11:06:52.063 に答える
1

このような長くて複雑なセレクターは、長期的にはすぐに保守できなくなります。

同じ方法でスタイルを設定する要素に共通のクラスを追加する方がはるかに簡単でクリーンです。

.text-field {
    padding:8px;
    width:224px;
    border:1px solid #CCC;
    border-radius:5px;
}
于 2012-04-14T11:15:41.830 に答える
0

より良い答えがすでに与えられていることは知っていますが、記録のためだけに、そしてティムの答えを補強するためです。

type="text"属性を持つ、またはまったく持たない入力を操作する場合は、次のtypeセレクターを使用します。

input:not([type]), input[type='text']
于 2012-04-14T11:29:55.833 に答える