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

【问题标题】：How can I apply styles to multiple classes at once?如何一次将样式应用于多个类？
【发布时间】：2011-01-07 03:23:13
【问题描述】：

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

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

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

由于两个类都在做同样的事情，我应该能够将它合并为一个。我该怎么做？

【问题讨论】：

【解决方案1】：

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

是您正在寻找的。

【讨论】：

+1，正是我想要的。然后，您还可以为 .abc 和/或 .xyz 设置第二个单独的条目，用于您不想同时应用于两者的属性，例如.xyz {font-weight: bold;} 将结合起来使 .xyz 粗体和左边距 20 像素，但 .abc 只有左边距。
完美运行，我设计了多达 10 个类。谢谢

【解决方案2】：

您可以对相同的属性有多个 CSS 声明，用逗号分隔它们：

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

【讨论】：

【解决方案3】：

不要重复你的 CSS

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

或

 a{
    margin-left:20px;
 }

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

如果你之前已经和他们的父母一起设置了这些课程，你应该再次和父母一起设置它们（每次重复），如下所示：

parent .abc, parent .xyz

【讨论】：

【解决方案6】：

只需用逗号分隔类名。

.a,.b{
your styles
}

【讨论】：

【解决方案7】：

还有一种方法可以使用@extend 通过 SCSS 实现这一点。

【讨论】：

【解决方案8】：

使用 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 在计算选择器的特异性时会被忽略：

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

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

【讨论】：