类选择器优先级高于多个唯一ID

Question

我有三个独特的ID就像这样：

#green-text {
    color: #57BF90;
}

#grey-text {
    color: #474444;
}

#orange-text {
    color: #FFAC00;
}

每个人都有一个名为.example-button的班级。当单击其中一个类时，我想使用jQuery来执行

$('.example-button').click(function() {
     $(this).addClass('white-text');
     $(this).siblings().removeClass('white-text');
}

，其中

.white-text {
     color: white;
}

但是，当然这个课程没有优先考虑ID，所以没有什么会改变。除了

之外，还有更好的方法来编写脚本

.white-up-text#green-text {
    color: white;
}
.white-up-text#grey-text {
    color: white;
}
.white-up-text#orange-text {
    color: white;
}

或使用!important以外的其他人？ （我正在避免!important以尊重良好的 CSS 练习

Answer 1

当然，您可以继续嵌套样式，以提高特异性并定位元素。

您可以使用!important，但这应该是最后一个选项。否则，您的代码在某一点之后将无法扩展，并且被认为是最糟糕的做法。

并且，首先是id，因为它们承载更多的重量（只是一种不会影响特异性的模式）

#green-text.white-text {
    color: white;
}

将样式与ID关联后。

• 覆盖的唯一方法是使用！important（避免它）
• 使用更具体的样式（始终嵌套在id中） 你的目标是什么。）
• 使用内嵌样式，它具有比id
更好的特异性

从长远来看，它是不可维护的。因此，用class代替

更换它总是更好的主意

.green-text.white-up-text {
    color: white;
}
.grey-text.white-up-text {
    color: white;
}
.orange-text.white-up-text {
    color: white;
}

另请参阅 OOCSS ，其中提倡代码重用原则，其中类是国王。

Answer 2

将您的jquery更改为：

$('.example-button').click(function() {
 $(this).css("color","white");
 $(this).siblings().removeAttr('style'); });

这适用于内联样式比id选择器更具特异性。