javascript - 为什么这个悬停 addClass 不起作用？

Question

这是jQuery：

$(document).ready(function() {
    $('#box').click(function() {
        $(this).addClass('fullColor');
    });
});

这是CSS：

#box {
    width:200px;
    height:200px;
    background-color:blue;
    opacity:0.5;
}

.fullColor {
    opacity:1.0;
}

score 5 · Accepted Answer

有效，addClass只是浏览器决定 in 的不透明度fullColor被 in 覆盖#box。

如果您将声明更改为：

#box.fullColor {
    opacity:1.0;
}

它将应用新的不透明度。

在 CCS 中，更具体的规则获胜。#box比.fullColor因为 id 比类更具体。并且#box.fullColor有 class 和 id 所以它比#boxand更具体.fullColor。

score 2 · Accepted Answer

该类已正确添加。（这可以/应该使用适当的开发人员工具进行验证......这也将显示应用了哪些规则，以及为什么。）

然而，由于CSS 的特殊性#box，这条规则总是会胜出：.fullColor

特异性是一种权重类型，它与您的级联样式表 (CSS) 规则的显示方式有关。如果两个选择器应用于同一个元素，则具有较高特异性的选择器获胜。

用作选择#box.fullColor器并观察结果 - 它比 just“更具体” #box，尽管它仅在.fullColor类存在时应用，因此会获胜。

如果这不可能（有时确实会发生），则!important可以使用，但应谨慎使用。

score 1 · Accepted Answer

如果您需要保留这些 CSS 值，一个不太优雅的解决方案是将!important添加到 fullColor 不透明度：

.fullColor{
    opacity:1.0 !important;
 }

3 回答 3