javascript - 为什么这个 hover 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;
}

JSFiddle:http://jsfiddle.net/VPW6c/

Answer 1

addClass 起作用，只是浏览器决定 fullColor 中的不透明度被 #box 中的不透明度覆盖。

如果您将声明更改为:

#box.fullColor {
    opacity:1.0;
}

它将应用新的不透明度。

在 CCS 中，更具体的规则优先。 #box 比 .fullColor 更具体，因为 id 比类更具体。 #box.fullColor 同时具有类和 id，因此它比 #box 和 .fullColor 更具体。