Question

对于一个按钮，我有3个可能的类：“state-normal”，“state-focus”和“state-hover”。它们具有相同的属性（背景，边框，...），但是具有不同的值属性。
如果按钮变为“状态焦点”，我不想删除“状态正常”类如果按钮是“状态焦点”并且获得“状态悬停”，我不想删除该类 “国家重点”。
在浏览器语言规范中，您可以为语言提供“质量”/优先级：

"Accept-Language: da, en-gb;q=0.8, en;q=0.7"

在css中做同样的事情会很棒：

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-hover  { background-color: #eeeeee;q=0.9 }

我知道CSS中没有任何内容。

但是，我知道在jQuery UI中他们有这种情况，因为当他们将“ui-state-focus”分配给一个元素时，他们不会删除“ui-state-default”。他们是怎么做到的？

是否有另一种方法可以通过技巧实现这一点（WITHOUT！IMPORTANT）。

非常感谢

Answer 1

您可以使用CSS执行此操作。

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-normal.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-focus.state-hover  { background-color: #eeeeee;q=0.9 }

但这意味着规则中提到的所有类都将存在，即一个元素将同时存在两个类。因此，具有类state-focus的元素将不会按照规则设置背景颜色。

如果你想避免这种情况，那么你可以这样做：

.state-normal { background-color: #aaaaaa;q=0.5 }
.state-focus, .state-normal.state-focus  { background-color: #bbbbbb;q=0.7 }
.state-hover, .state-focus.state-hover  { background-color: #eeeeee;q=0.9 }

编辑：根据OP的要求

CSS Specificity

CSS Selectors - MDN

一个css属性值优先于另一个

1 个答案: