javascript – Probleme mit der Priorität der von className hinzugefügten Stile.
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>