小记：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，问题得以解决。