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

Question

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

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

<a class="abc">Lorem</a>
<a class="xyz">Ipsum</a>

由于两个类都在做同样的事情,我应该能够将它合并为一个.我怎样才能做到这一点？

Answer 1

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

是你在找什么.

+1,正是我想要的.然后,您还可以为.abc和/或.xyz提供第二个单独的条目,用于您不希望同时应用的属性,例如.xyz {font-weight:bold;}将组合使.xyz粗体和边距 - 由20px左右但是.abc仅剩余边距. (5认同)

Answer 2

您可以使用逗号分隔相同属性的多个CSS声明:

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

Answer 3

只需用逗号分隔类名称即可。

.a,.b{
your styles
}

Answer 4

不要重复你的CSS

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

要么

 a{
    margin-left:20px;
 }

Answer 5

如果您之前已与父母一起设置过这些课程，则应再次与父母一起设置它们（每次重复），如下所示：

parent .abc, parent .xyz

Answer 6

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

.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;
}

Answer 7

使用 CSS 伪类:is（以前是:any和:matches）和:where，您可以使用逗号来匹配任何级别的多个类。

在根级别，:is(.abc, .xyz)功能.abc, .xyz几乎相同。但是，:is允许仅匹配选择器的一部分，而无需多次复制整个选择器。

例如，如果要匹配.root .abc .child和.root .xyz .child，可以编写如下代码：

.root :is(.abc, .xyz) .child {
   margin-left: 20px;
}

<div class="root">
  <a class="abc">
    <span class="child">Lorem</span>
  </a>
  <a class="xyz">
    <span class="child">Ipsum</span>
  </a>
</div>

:is和:where之间的区别在于:where在计算选择器的特异性时被忽略：

两个伪类都接受一个宽容的选择器列表，这意味着如果一个选择器无法解析（由于不受支持的语法，太新，太旧或只是不正确），其他选择器仍然可以工作。这使得:即使在根级别也很有用，因为它允许使用现代 CSS 功能组合选择器，而不必担心一个选择器会破坏其余的选择器。

PS 这个问题回答了这个问题的一个更困难的变体，但是谷歌在太多查询上返回了这个页面，所以我认为这个信息在这里是相关的。