Question

是否可以简化逗号分隔的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;
}

Answer 1

根据评论，现在使用普通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;
}

使用公共前缀/后缀简化逗号分隔的CSS选择器

1 个答案: