/* Example */ .blue, .red { color: white; background-color: blue; } /* Explanation: * The above code creates a rule for both the 'blue' and 'red' classes * to have white text on a blue background. * The comma between the two class names means that the same styling * will apply to elements with either class. */
多类名选择器的好处在于可以减少 CSS 代码的冗余。如果两个类具有相同的样式,那么将它们组合在一起,一次性给它们应用相同的样式,是一种比较优雅的命名方式。
然而,过度使用多类名选择器也是不好的。代码中的每个逗号都会增加 CSS 解析的时间,当样式规则过多时,这个时间的差异可能就会对性能产生不良影响。此外,逗号也可以使代码变得更难读懂和维护,尤其是当它被滥用时。
总之,多类名选择器是一种方便的 CSS 命名方式,但并不是适用于所有场合的。大家应当根据具体情况来决定是否使用它。