无法在具有不同类的按钮中定义不同的CSS样式？

Question

我的网站中有两个不同的按钮，我希望它们看起来不同。我无法弄清楚如何让它发挥作用。

现在，我的CSS代码是：

input.button{ }

但是如果我有两个按钮并且我需要它们都有不同的颜色，那么我这样做：

<input type=button class="button1">
<input type button class="button2">

我不知道如何将其链接到CSS。我试过这个但没有发生任何事情：

input.button.button1{}
input.button.button2{}

当然，我没有在花括号中添加任何内容，但我确实添加了它们，但它似乎不起作用。虽然，如果我删除其中一个，然后也删除“.button1”，那么它们似乎工作正常。但是，我再也不能为不同的按钮提供不同的属性。

Answer 1

你想要这个：

<input type="button" class="button button1" />
<input type="button" class="button button2" />

CSS

input.button { /* Shared styles here */ }
input.button1 { /* Button 1 specific styles here */ }
input.button2 { /* Button 2 specificstyles here */ }

Answer 2

您只需要识别班级。

.button1 { foreground-color: red; }
.button2 { foreground-color: green; }

Answer 3

你可以只使用

.button1{}

.button2{}

干杯

Answer 4

尝试这个来定义你的css类：

input .button1{...} input .button2{...}

基本上你可以根据标签名称，元素ID或类或这些组合来定义CSS 3.“按钮”在代码中没有位置，因为它只是输入标签的一个属性的值。 / p>

Answer 5

对于此标记：

<input type="button" class="button1" value="one">
<input type="button" class="button2" value="two">

这个CSS会产生不同的颜色：

input.button1 { color: red; }
input.button2 { color: blue;}

见JSFiddle。

请务必清除CSS和HTML中的错误。

Answer 6

这里有两点，首先你没有在你的css中实际定义你的按钮，在css中定义一个你这样做的类型：

input[type="button"]

其次你有一个html错误，这个：

<input type button class="button2">

应该是这样的：

这一切都完成了，你的css看起来像：

input[type="button"].button1{}

input[type="button"].button2{}

如果你不需要这个具体，你也可以这样做：

.button1 {}

.button2 {}