将css类添加到多个元素 [英] adding css class to multiple elements

问题描述

我已经创建了一个名为'button'的CSS类，并将它应用于我所有的INPUT标签：

I have created a CSS class called 'button' and applied it to all of my INPUT tags by simply using :

.button input
{
//css stuff here
}

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

这样工作正常，但我添加了另一个按钮，但这不是我的形式的一部分，它只是一个placeholder，用javascript和trigerred，打开一个iFrame。

which works fine, but I then added another button, but this isn't part of my form, it is just a place holder which is trigerred with javascript, and opens an iFrame. As I wanted it to look the same as all the 'real' buttons I used the same class.

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

问题我的是，如果我离开类作为 .button输入 < a> 标记没有看到。如果我删除了输入部分CSS所有我的按钮在中间有灰色方块。

The Problem I had was that if I left the class as .button input the <a> tag didn't see it. If I removed the input part of the CSS all my buttons got grey squares in the middle.

它与 .button输入，一个

这工作正常。 。 。直到我查看另一个页面，发现我的所有< a> 标签现在格式化为'button'类，即使他们没有应用这个类。

This worked fine. . . Until I looked at another page, and found all of my <a> tags were now formatted with the 'button' class, even though they don't have this class applied.

我的问题是如何应用相同的CSS类到< input> 和< a> 标签，但前提是我已明确添加 class =button。

My question then is how can I apply the same CSS class to <input> and <a> tags at the same time, but only if I have explicitly added class="button".

推荐答案

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

You need to qualify the a part of the selector too:

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

基本上，当您使用逗号创建选择器组，每个单独的选择器是完全独立的。

Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.

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

Your original selector therefore matched "all elements of type 'input' that are descendants of an element with the class name 'button', and all elements of type 'a'".

这篇关于将css类添加到多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！