40

我创建了一个名为“按钮”的 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>没有看到它。如果我删除了inputCSS 的一部分，我的所有按钮都会在中间出现灰色方块。

所以我解决了.button input,a

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

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

4

4 回答 4

74

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

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

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

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

于 2012-09-28T13:14:43.027 回答
9

尝试使用：

.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
}
于 2012-09-28T13:15:10.650 回答
3 
.button input,
.button a {
    ...
}
于 2012-09-28T13:14:49.323 回答
1

试试这个：

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

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

于 2012-09-28T13:19:11.837 回答