css - CSS「and」および「or」

Question

いくつかの入力タイプのスタイリングから分析する必要があるため、非常に大きな問題が発生します。私は次のようなものを持っていました：

.registration_form_right input:not([type="radio")
{
 //Nah.
}

しかし、私もチェックボックスのスタイルを設定したくありません。

私はもう試した：

.registration_form_right input:not([type="radio" && type="checkbox"])
.registration_form_right input:not([type="radio" && "checkbox"])
.registration_form_right input:not([type="radio") && .registration_form_right input:not(type="checkbox"])

使い方は&&？そして||、すぐに使う必要がありますが、使い方は同じだと思います。

更新：私はまだ正しい
使い方がわかりませ||ん。&&W3ドキュメントに何も見つかりませんでした。

score 188 · Accepted Answer

&&次のような複数のセレクターを一緒に文字列化することで機能します。

<div class="class1 class2"></div>

div.class1.class2
{
  /* foo */
}

もう一つの例：

<input type="radio" class="class1" />

input[type="radio"].class1
{
  /* foo */
}

||-soのように複数のセレクターをコンマで区切ることで機能します。

<div class="class1"></div>
<div class="class2"></div>

div.class1,
div.class2
{
  /* foo */
}

score 54 · Accepted Answer

AND（&&）：

.registration_form_right input:not([type="radio"]):not([type="checkbox"])

または（||）：

.registration_form_right input:not([type="radio"]), 
   .registration_form_right input:not([type="checkbox"])

score 24 · Accepted Answer

要素のプロパティaANDを選択するbにはX：

X[a][b]

要素のプロパティaORを選択するbにはX：

X[a],X[b]

score 4 · Accepted Answer

:not疑似クラスはIEではサポートされていません。私は代わりにこのようなものを手に入れました：

.registration_form_right input[type="text"],
.registration_form_right input[type="password"],
.registration_form_right input[type="submit"],
.registration_form_right input[type="button"] {
  ...
}

そこにはいくつかの重複がありますが、より高い互換性のために支払うのは小さな代償です。

score 3 · Accepted Answer

誰かが私のように立ち往生している場合に備えて。ポストといくつかのヒットとトライアルを通過した後、これは私のために働いた。

input:not([type="checkbox"])input:not([type="radio"])

score 2 · Accepted Answer

＆と：notを使用して、「OR」の動作をなんとか再現できます。

SomeElement.SomeClass [data-statement="things are getting more complex"]  :not(:not(A):not(B))     {
    /* things aren't so complex for A or B */
}

score 1 · Accepted Answer

もっとセレクターを書いてコンマで割るのは嫌いだと思いますか？

.registration_form_right input:not([type="radio"]),  
.registration_form_right input:not([type="checkbox"])  
{  
}

そしてところでこれ

not([type="radio" && type="checkbox"])

私には「これらの両方のタイプを持たない入力」のように見えます:)

score 1 · Accepted Answer

注意の言葉。複数のnotセレクターをつなぎ合わせると、結果のセレクターの特異性が増し、オーバーライドが難しくなります。基本的に、すべてのnotを含むセレクターを見つけて、新しいセレクターにコピーアンドペーストする必要があります。

セレクターは、特異性を膨らませるのを避けるのに最適ですが、この回答not(X or Y)のように、反対の組み合わせに固執する必要があると思います。

css - CSS「and」および「or」

8 に答える 8

Related

Reference