将css类添加到多个元素

Question

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

.button input
{
//css stuff here
}

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

工作正常，但我添加了另一个按钮，但这不是我的表单的一部分，它只是一个使用javascript进行triger的占位符，并打开一个iFrame。因为我希望它与所有“真正的”按钮看起来一样，我使用了相同的类。

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

我遇到的问题是，如果我将课程作为.button input离开，则<a>标签没有看到它。如果我删除了CSS的input部分，我的所有按钮都会在中间显示灰色方块。

所以我用.button input,a

解决了这个问题

这很好用。 。 。在我查看另一个页面之前，发现我的所有<a>标签现在都使用“按钮”类进行了格式化，即使它们没有应用此类。

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

Answer 1

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

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

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

您的原始选择器因此匹配“类型'输入'的所有元素，它们是具有类名”按钮'的元素的后代，以及所有类型为“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
}

Answer 3

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

Answer 4

试试这个：

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

这会将样式应用于嵌套在<p class="button"></p>

内的所有标签