css - 将CSS类添加到多个元素

Question

我创建了一个名为“按钮”的 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>标签没看到。如果我删除了 input CSS 的一部分，我所有的按钮在中间都有灰色方 block 。

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

这很好用。 . .直到我查看另一页，找到我所有的 <a>标签现在使用“按钮”类进行格式化，即使它们没有应用此类。

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

Answer 1

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

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

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

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