Ich habe einen einfachen Kalender mit ul li erstellt. Dann habe ich zuerst CSS verwendet, um den Selektor #div ul li zu verwenden. Dann habe ich den Klassennamen von js verwendet, um allen li einen aktiven Stil hinzuzufügen nicht mehr so hoch wie ursprünglich, also was soll ich tun ...

p ul li.active{ //do something }

javascript – Probleme mit der Priorität der von className hinzugefügten Stile.-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich habe einen einfachen Kalender erstellt, der mit ul li erstellt wurde, und dann habe ich zuerst CSS verwendet, um einen Hintergrund hinzuzufügen: black, indem ich den Selektor #p ul li verwendet habe, dann habe ich den Klassennamen von js verwendet, um einen aktiven Stil für alle li hinzuzufügen , und dann ist die Hintergrundpriorität nicht mehr so hoch wie ursprünglich. Was muss ich also tun, um die Priorität auf die höchste Stufe zu erhöhen? – Halbfertiger Code. .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #main{
            width: 500px;
            height: 300px;
        }

        #main ul li{
            float: left;
            width: 80px;
            height: 80px;
            background-color: gray;
            list-style: none;
            margin: 20px;
        }

        #main p{
            width: 300px;
            height: 80px;
            border: 1px solid red;
            position: absolute;
            top:350px;
        }

        .active{
            background:red;
            color: #fff;
            cursor: pointer;
        }
    </style>

    <script>
        window.onload=function()
        {
            var op = document.getElementById('main');
            var oLi = op.getElementsByTagName('li');
            var ap = op.getElementsByTagName('p')[0];
            var month = ['a','b','c','d','e','f','g','h','i','j','k','l']

            for(var i=0;i<oLi.length;i++)
            {
                oLi[i].index=i;
                oLi[i].onmouseover=function()
                {
                    for(var i=0;i<oLi.length;i++)
                    {
                        oLi[i].className="";
                    }
                    this.className="active";
                    ap.innerHTML = (this.index+1)+month[this.index];
                }
            }
        }
    </script>
</head>
<body>
    <p id="main">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
        <p></p>
    </p>
</body>
</html>