如何为含lmn-tab-item-active类的lmn-tab-item元素设置CSS样式

要实现你的需求，不需要复杂的属性选择器或!important，直接用类选择器组合和:not()伪类即可：

/* 匹配同时拥有lmn-tab-item和lmn-tab-item-active类的元素 */
.lmn-tab-item.lmn-tab-item-active {
  color: green;
}

/* 匹配仅拥有lmn-tab-item类、且不包含lmn-tab-item-active类的元素 */
.lmn-tab-item:not(.lmn-tab-item-active) {
  color: red;
}

原代码问题分析 #

你之前的代码无法生效，主要有以下几个原因：

• 第一个选择器div[class^="lmn-tab-item-active"][class*=" "]:before完全偏离需求：
  1. 使用:before伪元素是给元素的前置生成内容设置颜色，而非元素本身的文本颜色；
  2. [class^="lmn-tab-item-active"]要求class属性以该字符串开头，但你的第二个div的class是从lmn-tab-item开始的，所以这个选择器根本匹配不到目标元素；
  3. 属性选择器[class*=" "]完全多余，类选择器本身就支持多类匹配。
• 第二个选择器.lmn-tab-item会匹配所有带有该类的元素（包括第二个div），而你没有足够优先级的选择器覆盖它，导致第二个div也会被设置为红色。

另外，尽量避免使用!important，它会破坏CSS的优先级规则，让后续样式调试变得困难。

内容的提问来源于stack exchange，提问作者Ashok