今天用JS练习写选项卡切换效果时,一时忘了有CSS选择符优先级的存在,导致对li元素更换样式时耗费了一些时间,所以写下这篇短文加深记忆,愿与君共勉。
.wrap ul li{
list-style:none;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
float:left;
width:60px;
height:25px;
line-height:25px;
text-align:center;
margin-left:5px;
font-size:14px;
}
.lis{
border-top:1px solid #a77;
border-bottom:1px solid #fff;
}
css选择符的优先级(均为二进制):
行内样式:1000
ID选择符:0100
类选择符:0010
上下文选择符:0001
.wrap ul li 5
.lis 2
故导致更换样式失败。