Question

我正在创建一个文件拖放效果，当拖动文件时，边框颜色应该改变。

#upload-photo {
    height: 150px;
    text-align: center;
    line-height: 150px;
    font-size: 18px;
    border-radius: 3px 3px 3px 3px;
    border-style: dashed;
    border:4px dashed #c0c0c0;
}
.upload-photo-border {
    border:4px solid #999;
}

HTML代码：

<div id="upload-photo">Drop photo here to upload.</div>

jQuery代码

.............
    dragOver: function() {
        // user dragging files over #dropzone
                $("#upload-photo").addClass("upload-photo-border");
                $('#upload-photo').css('width', '100px');
    },
..........

添加所需的类时，Border Color仍然不会改变。不确定我是否做错了。

Answer 1

这是specificity的问题。使您的类选择器更具体。例如：

#upload-photo.upload-photo-border{
    border:4px solid #999;
}

作为一般规则，请记住ID选择器比类选择器更具体，而类选择器又比标签名称选择器更具体。

此外，选择器中存在的部件越多，它就越具体。

Answer 2

css id规则比类规则更强。你可以写这样的

#upload-photo.upload-photo-border {
    border:4px solid #999;
}

或使用！important

.upload-photo-border {
    border:4px solid #999 !important;
}

使用addClass时的CSS ID与CLASS

2 个答案: