Html 如何为两个标签设置一个 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13973833/
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
How to set one CSS rule for two tags?
提问by bonny
I would like to know how I can set one setting for two different classes.
我想知道如何为两个不同的类设置一个设置。
To give an example:
举个例子：
.footer #one .flag li .drop_down form div{
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
line-height: 1.5;
color: #ccc;
font-weight:bolder;
margin-left: 30px;
}
.footer #two .flag li .drop_down form div{
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
line-height: 1.5;
color: #ccc;
font-weight:bolder;
margin-left: 30px;
}
Both rules have the same content. The difference is just the second tag. Is there a way to do something like this?
两个规则具有相同的内容。区别只是第二个标签。有没有办法做这样的事情？
.footer >>>#one and #two<<<< .flag li .drop_down form div{
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
line-height: 1.5;
color: #ccc;
font-weight:bolder;
margin-left: 30px;
}
回答by James Allardice
Separate the selectors with a comma:
用逗号分隔选择器：
.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div {
/* Rules */
}
From the selectors level 3 spec:
A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list. (A comma is U+002C.) For example, in CSS when several selectors share the same declarations, they may be grouped into a comma-separated list. White space may appear before and/or after the comma.
逗号分隔的选择器列表表示列表中每个单独选择器选择的所有元素的联合。（逗号是 U+002C。）例如，在 CSS 中，当多个选择器共享相同的声明时，它们可能被分组到一个逗号分隔的列表中。空格可能出现在逗号之前和/或之后。
回答by Pez Cuckow
In CSS you use a ,(comma), unfortunately this is on the entire selector rather than just a section of it.
在 CSS 中，您使用,（逗号），不幸的是，这是在整个选择器上，而不仅仅是它的一部分。
If you really wanted to make it cleaner you could give each of the form div'sa unique id and then just #form1, #form2.
如果你真的想让它更干净，你可以给每个人form div's一个唯一的 id，然后只给#form1, #form2.
You can find further info in "Shorten the comma separated CSS selectors".
您可以在“缩短逗号分隔的 CSS 选择器”中找到更多信息。
For example:
例如：
.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div {
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
line-height: 1.5;
color: #ccc;
font-weight:bolder;
margin-left: 30px;
}
回答by MikeTedeschi
.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div{
...
}
回答by Liam
Separate with a comma:
用逗号分隔：
.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div
{
shared css
}
.footer #one .flag li .drop_down form div
{
indvi css for one
}
.footer #two .flag li .drop_down form div
{
indvi css for two
}
回答by Rakesh Vadnal
Use a comma instead of separate CSS rules:
使用逗号而不是单独的 CSS 规则：
.footer #one .flag li .drop_down form div,
.footer #two .flag li .drop_down form div {
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
line-height: 1.5;
color: #ccc;
font-weight:bolder;
margin-left: 30px;
}
