html - CSS3は複数の要素をフォーマットしますが、すべてではありません

Question

css でフォーマットしたいボタンがあります。それらをフォーマットするための 2 つのオプションが#id {}見つかりbutton {}まし#ID {}たbutton {}。さまざまなサイズのボタンがあり、それらの「グループ」をフォーマットしたいと考えています。でフォーマットするのは非常に面倒です#id。グループを与えるか、同じ名前を使用して css でアクセスすることは可能ですか?

Answer 1

安全に使用できるよりも一般的にボタンをターゲットにしたい場合

button { /* This will target all buttons */
   /* Styles goes here */
}

または、それらをコンテナ要素内にラップして、次のようなクラスを与えます

<div class="wrap_all_btn">
   <!-- All button goes here -->
</div>

CSS

div.wrap_all_btn button { 
   /* This will target buttons which are only inside a div 
      element having class .wrap_all_btn */
   /* Styles goes here */
}

ラッパー内のボタンを一意にターゲットにするには、nth-childorを使用できますが、要素固有であるため、ここnth-of-typeを好むnth-of-typeので、作成したラッパーの 2 番目のボタンをターゲットにする場合は、次のように記述できます。

div.wrap_all_btn button {
   /* This is where general styles go */
}


div.wrap_all_btn button:nth-of-type(2) {
   /* Create Unique Styles For 2nd Button Without Making Any Class */
}

Answer 2

クラスを使用できます。

HTML:

<input type="button" class="myClass">

CSS:

.myClass { width: 150px; }

ソース: http://www.quackit.com/css/tutorial/css_class.cfm

Answer 3

クラスを作成し、適用するさまざまなクラス属性に基づいてボタンをグループ化できます。

お気に入り

.button1{color:blue;}
.button2{color:red;}
.button3{color:green;}

したがって、これを行うことで、同じクラスの複数のインスタンスを、異なるボタンに適用したい回数だけ適用できます。

お役に立てれば。

Answer 4

html オブジェクト内で定義された styleClass。

<input type ="button" class = "myClass" ...(other values like value or id ...)/>

CSSで：

.myClass {
   //styling

 }