Question

我试图得到它，以便在点击第一个框时，它的背景颜色变为红色，但它不起作用。我尝试了很多不同的东西，但都没有奏效！这是我的代码：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $("#one").click(function(){
                $("#one").addClass("open");
            });
    });
    </script>
    <style>
        .open{
            background-color: red;
        }
        html{
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0px;
        }
        body{
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0px;
        }
        #title{
            height: 10%;
            width: 100%;
            background-color: rgba(0, 0, 255, 0.5);
        }
        h1{
            text-align: center;
        }
        #left{
            width: 30%;
            height: 100%;
            margin-top: 0.5%;
            margin-bottom: 0.5%;
            position: absolute;
        }
        #right{
            width: 70%;
            height: 100%;
            margin-top: 0.5%;
            margin-bottom: 0.5%;
            position: absolute;
            margin-left: 30%;
            border-left: solid 2px black;
        }
        .card{
            height: 20%;
            width: 80%;
            margin-left: 10%;
            position: absolute;
            background-color: blue;
            border-radius: 5px;
            border: grey solid 2px;
        }
        .first{
            margin-top: 6.5%;
        }
        #one{
            background-color: green;
        }
        .second{
            margin-top: 50%;
        }
        #two{
            background-color: green;
        }
        #main{
            width: 80%;
            height: 80%;
            margin-left: 10%;
            margin-top: 7.5%;
            background-color: white;
            border-radius: 5px;
            border: grey solid 3px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="title">
        <h1>Blah Blah Blah</h1>
    </div>
    <div id="left">
        <div class="card first" id="oneBottom">
        </div>
        <div class="card first" id="one">
        </div>

        <div class="card second" id="twoBottom">
        </div>      
        <div class="card second" id="two">
        </div>
    </div>
    <div id="right">
        <div id="main">
        </div>
    </div>
</body>

Answer 1

#one的绿色覆盖了它。你可以制作.open {background-color：red！important;强制它，但最好将绿色放在你从元素中删除的类上。重要的作品，但我相信这是值得避免的。

Answer 2

ID #one的css优先，

使用，

#one.open {
    background-color: red;
}

参考： CSS specificity

为什么没有在jquery .click上应用CSS属性？

2 个答案: