将CSS类添加到多个元素

Question

我创建了一个名为"button"的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"时才应用？

- IGGt

Answer 1

你需要在选择器中也限定 a 部分：

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

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

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

- James Allardice

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
}

- besluitloos

Answer 3

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

- scottlimmer

Answer 4

试试这个：

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

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

- Dan