Question

当我只有一个div并且在jquery中使用'div'时，此代码有效。它适用于<p>。当我用'div：first-of-type'精确定位时，它甚至可以工作。

但是当我使用'#first'或'#second'时，唯一改变的是边框。当我使用'div：last-of-type'时，一切都会改变，但是背景颜色。

为什么代码无法正常工作？

<div id="first"></div>
<div id="second"></div>
<p>hello there</p>
<button>button</button>

<style>
div {
    width:200px;
    height:200px;
    background-color:midnightblue;
}

#second {
    background-color:darkgreen;
}

p {
    width:200px;
    height:20px;
    background-color:aqua;
}

button {
    width:50px;
    height:25px;
    background-color:brown;
    color:yellow;
}

.black {
    background-color:black;
    border:medium cornsilk dashed;
    width:100px;
    height:150px;
    color:aliceblue;
}
</style>

     <script>
     $(function() {
        $('button').click(function() {
            $('#second').toggleClass('black');
        }); 
     });
     </script>

Answer 1

请参阅，ID的优先级高于类名。

#second {
    background-color:darkgreen;
}

这具有最高优先级，并且：

.black {
    background-color:black;
    border:medium cornsilk dashed;
    width:100px;
    height:150px;
    color:aliceblue;
}

至少有一个属性不在id选择器中，但不是background-color。

您可以使用#id.class覆盖它：

 #second.black { /*  <------------------this way */
    background-color:black;
    border:medium cornsilk dashed;
    width:100px;
    height:150px;
    color:aliceblue;
}

您可以使用!important 破解它（不推荐使用）：

.black {
    background-color:black !important;
    border:medium cornsilk dashed;
    width:100px;
    height:150px;
    color:aliceblue;
}

toggleClass多个div

1 个答案: