1

对于按钮，我有 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”。他们是怎么做到的呢？

有没有另一种方法来实现这个技巧（没有！重要）。

非常感谢提前

4

1 回答 1

3

您可以使用 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 特异性

CSS 选择器 - MDN

类似的答案

于 2013-05-03T09:04:25.640 回答