我们可以在css中将两条规则组合成一条规则吗？答案

【问题标题】：can we combine two rule into single rule in css?我们可以在css中将两条规则组合成一条规则吗？
【发布时间】：2021-02-22 03:30:53
【问题描述】：

我有两个从 icn- 和 in-betwen icn- 开始的 senario 类。两者具有相同的属性。我们可以添加一个选择器或 regex，这两种情况都适用吗？

 .f20 [class^="icn-"]:before,.f20 [class*=" icn-"]:before {
            font-family: 'icons' !important;
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

【问题讨论】：

icn 不是一个类的任何原因？您可以根据多个类别进行选择。编辑：例如，如果您将icn-whatever 分为两个类icn 和whatever，那么您有.icn-whatever 的地方可以放入.icn.whatever（注意没有空格）。当然，如果需要，您可以单独选择 .icn。
这是相关的：stackoverflow.com/a/23963317/510788

标签： html jquery css flexbox

【解决方案1】：

在您的情况下，您可以编写以下内容：

.f20 [class*="icn-"]:before {
   color: pink; /*whatever you want goes here*/
}

这会选择任何icn- 类，如果它位于开头或其他位置。请注意，这也会选择 this-icn-class 之类的内容，因为它只检查 icn- 而并不关心前面的字符。

【讨论】：