将css类添加到多个元素

Question

我创建了一个名为'button'的CSS类,并通过简单地使用它将其应用于我的所有INPUT标签:

.button input
{
//css stuff here
}

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

这工作得很好,但后来我加了另一个按钮,但这不是我的表单的一部分,它只是一个占位符,这是trigerred使用JavaScript,并打开一个iFrame.因为我希望它与所有"真正的"按钮看起来一样,我使用了同一个类.

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

我的问题是,如果我离开班级为.button input的<a>标签没看出来.如果我删除了inputCSS 的一部分,我的所有按钮都在中间有灰色方块.

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

这很好...直到我看了看另一页,发现我所有的<a>标签被格式化,现在用"按钮"类,即使他们没有应用这个类.

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

Answer 1

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

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

基本上,当您使用逗号创建一组选择器时,每个选择器都是完全独立的.他们之间没有任何关系.

因此您的原始选择匹配的"类型'输入’是与类名'按钮’的元素的后代的所有元素,和类型的所有元素'A’".

Answer 2

尝试使用:

.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
}