toggleClass 多个div

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 比 class 名称具有更高的优先级。

#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

toggleClass multiple divs

jquery

toggleclass