为什么这个悬停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因为ids比类更具体.并且#box.fullColor同时具有类和id,因此它比#box和更具体.fullColor.