javascript - 为什么此悬停addClass无法正常工作？

这是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/

最佳答案

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

如果将声明更改为：

#box.fullColor {
    opacity:1.0;
}

它将应用新的不透明度。

在CCS中，更具体的规则获胜。 #box比.fullColor更具体，因为id比类更具体。而且#box.fullColor同时具有类和ID，因此比#box和.fullColor更具体。