使用通用前缀/后缀简化逗号分隔的 CSS 选择器 [重复]答案

【问题标题】：Simplifying comma separated CSS selectors with common prefix/suffix [duplicate]使用通用前缀/后缀简化逗号分隔的 CSS 选择器 [重复]
【发布时间】：2017-01-07 15:35:10
【问题描述】：

是否可以使用通用前缀/后缀简化逗号分隔的 CSS 选择器？

我目前的风格是这样的（不过要长得多）：

html:lang(qw) div[data-domain*='abc.com'], html:lang(qw) div[data-domain*='def.com'], html:lang(qw) div[data-domain*='ghi.com'], html:lang(qw) div[data-domain*='jkl.com'] {
    display: none!important;
}

我想知道是否可能出现以下情况：

html:lang(qw) div[data-domain*=('abc.com', 'def.com', 'ghi.com', 'jkl.com')] {
    display: none!important;
}

【问题讨论】：

使用Sass 或LESS 等CSS 预处理器可以稍微简化此类情况。
不，这在 css 中是不可能的

标签： css css-selectors

【解决方案1】：

根据 cmets，这对于现在的纯 CSS 来说是不可能的。缩短选择器的唯一选择是使用预处理器，例如 SASS（Syntactically Awesome StyleSheets）。 SASS 允许您编写更易读、更短的代码。您可以在自己的计算机上将 SASS (*.scss) 文件编译为纯 CSS，因此当它在服务器上时，它就是您习惯的纯旧 CSS，所有浏览器都可以理解。您的用户没有额外的要求。

对于这种特殊情况，您可以使用for-each loop。

@each $domain in 'abc.com', 'def.com', 'ghi.com', 'jkl.com' {
  html:lang(qw) div[data-domain*='#{$domain}'] {
    display: none !important;
  }
}

这将产生以下 CSS：

html:lang(qw) div[data-domain*='abc.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='def.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='ghi.com'] {
  display: none !important;
}

html:lang(qw) div[data-domain*='jkl.com'] {
  display: none !important;
}

【讨论】：

这实际上不适用于我的具体情况，但我接受答案，因为它解决了一般问题。谢谢。