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

Question

我的网站中有 2 个不同的按钮，我希望它们看起来不同。我不知道如何让它工作。

现在，我的 CSS 代码是：

input.button{ }

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

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

我不知道如何将其链接到 CSS。我试过了，但什么也没发生：

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

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

score 4 · Accepted Answer

你要这个：

<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 */ }

score 1 · Accepted Answer

1

您只需要识别类。

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

于 2012-10-19T18:48:54.620 回答

score 1 · Accepted Answer

1

你可以只使用

.button1{}

.button2{}

干杯

于 2012-10-19T18:49:07.413 回答

score 1 · Accepted Answer

试试这个来定义你的 CSS 类：

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

基本上，您可以根据标签名称、元素 ID 或类，或这三者的组合来定义 CSS。“按钮”在您的代码中没有位置，因为它只是输入标签的属性之一的值。

score 0 · Accepted Answer

对于这个标记：

<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 中的错误。

score 0 · Accepted Answer

这里有两点，首先你没有在你的 css 中准确定义你的按钮，要在 css 中定义一个类型，你可以这样做：

input[type="button"]

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

<input type button class="button2">

应该是这样的：

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

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

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

如果您不需要如此具体，您也可以这样做：

.button1 {}

.button2 {}

6 回答 6