将css类添加到多个元素答案

【问题标题】：adding css class to multiple elements将css类添加到多个元素
【发布时间】：2012-09-20 09:07:50
【问题描述】：

我创建了一个名为“按钮”的 CSS 类，并将其应用于我的所有 INPUT 标签，只需使用：

.button input
{
//css stuff here
}

<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>

效果很好，但我随后添加了另一个按钮，但这不是我的表单的一部分，它只是一个由 javascript 触发的占位符，并打开一个 iFrame。因为我希望它看起来与所有“真实”按钮相同，所以我使用了同一个类。

<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>

我遇到的问题是，如果我以.button input 的身份离开班级，<a> 标签就看不到它。如果我删除了 CSS 的 input 部分，我所有的按钮都会在中间出现灰色方块。

所以我用.button input,a解决了它

这很好用。 . .直到我查看另一个页面，发现我所有的 <a> 标签现在都被格式化为 'button' 类，即使它们没有应用这个类。

然后我的问题是如何将相同的 CSS 类同时应用于 <input> 和 <a> 标签，但前提是我明确添加了 class="button"。

【问题讨论】：

标签： css class

【解决方案1】：

尝试使用：

.button input, .button a {
    // css stuff
}

另外，阅读 CSS。

编辑：如果是我，我会将按钮类添加到元素，而不是父标记。像这样：

HTML：

<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />

CSS：

.button {
    // css stuff
}

对于特定的 css 内容使用：

input.button {
    // css stuff
}
a.button {
    // css stuff
}

【讨论】：

【解决方案2】：

试试这个：

.button input, .button a {
//css here
}

这会将样式应用于嵌套在 <p class="button"></p> 内的所有标签

【讨论】：

【解决方案3】：

.button input,
.button a {
    ...
}

【讨论】：

【解决方案4】：

您还需要限定选择器的 a 部分：

.button input, .button a {
    //css stuff here
}

基本上，当您使用逗号创建group of selectors 时，每个单独的选择器都是完全独立的。他们之间没有任何关系。

因此，您的原始选择器匹配“类型为 'button' 的元素的后代的所有类型为 'input' 的元素，以及类型为 'a' 的所有元素”。

【讨论】：