css - CSSタグの割り当て

Question

私はこのCSSを使用しています

.options input[type="radio"],input[type="checkbox"],label{ vertical-align: middle; }

ただし、vertical-alignプロパティは、'options'クラスのチェックボックスだけでなく、サイトのすべてのチェックボックスに割り当てられています。

Answer 1

カンマで区切られた CSS ルールは、相互に関係がなく、異なるルールに同じスタイルを適用する簡単で一貫した方法です。あなたの例は次のように書き直すことができます：

.options input[type="radio"]
{
  vertical-align: middle;
}
input[type="checkbox"]
{
  vertical-align: middle;
}
label
{
   vertical-align: middle;
}

したがって、2 番目と 3 番目のルールは、これらのスタイルをすべての入力チェックボックスとラベルに適用します。求めている結果を得るには、ルールを次のように書き直す必要があります。

.options input[type="radio"]
{
  vertical-align: middle;
}
.options input[type="checkbox"]
{
  vertical-align: middle;
}
.options label
{
   vertical-align: middle;
}

次に、これの省略形は次のようになります。

.options input[type="radio"],
.options input[type="checkbox"],
.options label
{
   vertical-align: middle;
}

また、注目に値するのは、ベスト プラクティスは、各ルールとスタイルを別々の行に配置することです。これにより、後で使用する場合のバージョン管理が非常に簡単になります。

Answer 2

セットごとに.optionsを含める必要があります。例：

.options input[type="radio"], .options input[type="checkbox"], .options label{ vertical-align: middle; }

カンマを使用すると、基本的に「OR」ステートメントとして機能します。カンマ区切りの各ルールは個別に考慮されます。上記のコードは、次のように書くのと同じです。

.options input[type="radio"] { vertical-align: middle; }
.options input[type="checkbox"] { vertical-align: middle; }
.options label{ vertical-align: middle; }