如何一次将样式应用于多个类?


276

我希望两个名称不同的类在CSS中具有相同的属性。我不想重复代码。

.abc {
   margin-left:20px;
}  
.xyz {
   margin-left:20px;
}
<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

由于两个类都在做同一件事,因此我应该能够将其合并为一个。我怎样才能做到这一点?

Answers:


544
.abc, .xyz { margin-left: 20px; }

是您要寻找的。


6
+1,正是我想要的。然后,您还可以为.abc和/或.xyz分别创建一个第二个单独的条目,以获取您不想同时应用于这两个属性的属性,例如.xyz {font-weight:bold;}将合并以使.xyz变为粗体和margin- left.ed 20px,但.abc仅留给margin-left'ed。
RyanfaeScotland 2014年

64

对于同一属性,可以使用逗号分隔多个CSS声明:

.abc, .xyz {
   margin-left: 20px;
}

1
尽管所选答案是完全正确的,但我们不能保证新手会理解它在做什么。我将继续解释。由于它更多地是“如何钓鱼”而不是“这里有鱼”。
Olgun Kaya

15

不要重复您的CSS

 a.abc, a.xyz{
    margin-left:20px;
 }

要么

 a{
    margin-left:20px;
 }

2
我认为abc这是作为一个班级名称..和xyz另一个。您的建议是针对给定的问题,对通用属性使用通用的类名,这是不必要且令人困惑的。
Arete

3

如果按照以下方式使用,则代码可能比编写的代码更有效。您应该添加另一个功能。

.abc, .xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

要么

a.abc, a.xyz {
margin-left:20px;
width: 100px;
height: 100px;
} 

要么

a {
margin-left:20px;
width: 100px;
height: 100px;
} 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.