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-child或nth-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

在html对象中定义的styleClass。

<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" />

css3格式化多个元素但不是全部

6 个答案: