簡化以逗號分隔的CSS選擇器，使用通用前綴/後綴

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