小记:css特殊性
今天早上遇到了个小bug,刚好用从css权威指南学到的知识解决了
html结构
<ul class="portlet-nav">
<li><a id="portlet-1">Tab 1</a></li>
<li><a id="portlet-2">Tab 2</a></li>
<li><a id="portlet-3">Tab 3</a></li>
</ul>
css样式
.portlet-nav a {
color: #fff;
text-decoration: none;
display: block;
padding: 7px 10px 9px 10px;
margin-top: 4px;
margin-left: 1px;
background-color: #8e44ad;
}
.portlet-nav a:hover {
color: #000;
background-color: #fff;
cursor: pointer;
}
效果就是这样
没错,就是一个简单的tab切换而已
那么此处遇到的问题是这样的
我希望点击相应的tab时就选中这个tab,同时高亮,所以
target.className="portlet-active";
对应的css代码
.portlet-active{
color:#000;
background-color: #fff;
cursor: auto;
}
然而,当我实际操作的时候,发现样式并没生效,明明class已经加上去了
突然想起早两天看的权威指南,此处css样式上a的定义是这样的
.portlet-nav a
所以a对应的特殊性是 0 0 1 1
而我们新增的css样式active则是
.portlet-active
它的特殊性则是 0 0 1 0
所以相比之下,它的特殊性拼不过a原本的样式,根据层叠,所以即使加了active这个class,最终显示的样式还是原本的样式,所以,为了此处的正确显示,我们的active应该这样写
.portlet-nav .portlet-active
这样它的特殊性就变成了 0 0 2 0,问题得以解决。