javascript - 关于className添加的样式优先级的问题。
问题描述
我做了一个简易日历,用ul li做的,然后我首先用css给它使用选择器 #p ul li 添加了一个background:black; 然后,我用js的className把所有li添加了一个样式active,然后背景优先级没有原本的高,那么请问怎么做,可以把优先级提到最高。 --半成品代码。。
<!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>
问题解答
回答1:p ul li.active{//do something
}
相关文章:
1. javascript - 原生canvas中如何获取到触摸事件的canvas内坐标?2. python - Scrapy存在内存泄漏的问题。3. javascript - 移动端引入js去控制根元素的font-size,但在页面初始化时会有抖动的情况,请问有别的优化方法么4. CSS3 画如下图形5. javascript - 你们怎样实现前端分页的?6. javascript - html5的data属性怎么指定一个function函数呢?7. javascript - js中向下取整8. javascript - 关于<a>元素与<input>元素的JS事件运行问题9. javascript - sublime什么插件可以在我自动保存代码之后,对es6代码自动检查并格式化。10. python - 在使用Pycharm时经常看到如下的样式,小括号里红色的部分是什么意思呢?
