CSS 将css类添加到多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12640718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding css class to multiple elements
提问by IGGt
I have created a CSS class called 'button' and applied it to all of my INPUT tags by simply using :
我创建了一个名为“button”的 CSS 类，并通过简单地使用将它应用到我所有的 INPUT 标签：
.button input
{
//css stuff here
}
<p class="button">
<input type="submit" Name='submit' value="Confirm Selection"/>
</p>
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.
这工作正常，但我随后添加了另一个按钮，但这不是我的表单的一部分，它只是一个用 javascript 触发的占位符，并打开一个 iFrame。因为我希望它看起来与我使用相同类的所有“真实”按钮相同。
<p class="button" id="AddCustomer">
<a href="AddCustomer.php">Add Customer</a>
</p>
The Problem I had was that if I left the class as .button inputthe <a>tag didn't see it. If I removed the inputpart of the CSS all my buttons got grey squares in the middle.
这个问题我已经是，如果我离开班级为.button input的<a>标签没看出来。如果我删除了inputCSS的一部分，我所有的按钮都会在中间出现灰色方块。
So I resolved it with .button input,a
所以我解决了它 .button input,a
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.
这工作得很好。. . 直到我查看另一个页面，发现我的所有<a>标签现在都使用 '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".
那么我的问题是如何将相同的 CSS 类同时应用于<input>和<a>标签，但前提是我已明确添加class="button".
回答by James Allardice
You need to qualify the apart of the selector too:
您还需要限定a选择器的部分：
.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.
基本上，当您使用逗号创建一组选择器时，每个单独的选择器都是完全独立的。他们之间没有任何关系。
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'".
因此，您的原始选择器匹配“所有类型为 'input' 的元素都是具有类名 'button' 的元素的后代，以及类型为 'a' 的所有元素”。
回答by besluitloos
Try using:
尝试使用：
.button input, .button a {
// css stuff
}
Also, read up on CSS.
另外，请阅读 CSS。
Edit: If it were me, I'd add the button class to the element, not to the parent tag. Like so:
编辑：如果是我，我会将按钮类添加到元素，而不是父标签。像这样：
HTML:
HTML：
<a href="#" class='button'>BUTTON TEXT</a>
<input type="submit" class='button' value='buttontext' />
CSS:
CSS：
.button {
// css stuff
}
For specific css stuff use:
对于特定的 css 东西，请使用：
input.button {
// css stuff
}
a.button {
// css stuff
}
回答by scoota269
.button input,
.button a {
...
}
回答by Dan
try this:
尝试这个：
.button input, .button a {
//css here
}
That will apply the style to all a tags nested inside of <p class="button"></p>
这会将样式应用于嵌套在 <p class="button"></p>
