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-childornth-of-type但我更喜欢nth-of-type这里，因为它是特定于元素的，所以如果您想定位我们制作的包装器中的第二个按钮，那么您可以这样写

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

而不是ID's使用classes

HTML

/* Group 1*/

<button class="group1"></button>
<button class="group1"></button>
<button class="group1"></button>
<button class="group1"></button>

/* Group 2*/
<button class="group2"></button>
<button class="group2"></button>
<button class="group2"></button>
<button class="group2"></button>

CSS

.group1
{
Formatting Comes here..!!
}


.group2
{
Formatting Comes here..!!
}

Answer 3

styleClass 在 html 对象中定义。

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

在 CSS 中：

.myClass {
   //styling

 }

Answer 4

你可以使用一个类。

HTML：

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

CSS：

.myClass { width: 150px; }

来源： http ://www.quackit.com/css/tutorial/css_class.cfm

Answer 5

您可以根据要应用的不同类属性创建一个类并对按钮进行分组。

像

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

因此，通过这样做，您可以多次应用相同类的多个实例，希望它们应用于不同的按钮。

希望这可以帮助。

Answer 6

您可以向元素添加一些类：

.button{font-size: 15px; color: #ff0000;...}
.button.small{font-size: 12px;}
.button.large{font-size: 18px;}

<input type="button" class="button" />
<input type="button" class="button small" />
<input type="button" class="button large" />