如何将样式同时应用到多个类?

小开

最佳答案

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

就是你要找的。

小开

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

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

小开

不要重复你的CSS

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

或

 a{
margin-left:20px;
}

小开

如果你按照以下方法使用，你的代码会比你写的更有效。

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

小开

只需用逗号分隔类名。

.a,.b{
your styles
}

小开

如果你之前和他们的父母设置过这些类，你应该和他们的父母设置一次(每次重复)，如下所示:

parent .abc, parent .xyz

小开

还有一种方法可以使用@extend来实现SCSS。

小开

使用CSS伪类:is(以前是:任何和:匹配)和:where，你可以使用逗号来匹配任何级别上的多个类。

在根级，:is(.abc, .xyz)和.abc, .xyz的功能几乎相同。然而，:只允许匹配选择器的一部分，而不需要多次复制整个选择器。

例如，如果你想匹配.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>

:和:的区别在于，在计算选择器的特异性时，:会被忽略:

这两个伪类都接受宽容选择器列表，这意味着如果一个选择器解析失败(由于不支持的语法，要么太新，要么太旧，要么不正确)，其他选择器仍然可以工作。这使得:即使在根级也很有用，因为它允许使用现代CSS特性组合选择器，而不用担心一个选择器会破坏其他选择器。

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