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

Posted 2023-03-06

【中文标题】如何一次将样式应用于多个类？

【英文标题】：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;
 

【讨论】：

我认为abc 是一个类名......而xyz 是另一个类名。鉴于问题，您的建议是对常见属性使用通用类名，这是不必要且令人困惑的。

【参考方案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 在计算选择器的特异性时会被忽略：

.root :is(.abc, .xyz) .child 的特异性 = .root .abc .child 的特异性 .root :where(.abc, .xyz) .child 的特异性 = .root .child 的特异性

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

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