小记:css特殊性

时间:2023-02-09 21:06:28

今天早上遇到了个小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;
}

效果就是这样

小记:css特殊性

没错,就是一个简单的tab切换而已

那么此处遇到的问题是这样的

我希望点击相应的tab时就选中这个tab,同时高亮,所以

target.className="portlet-active";

对应的css代码

.portlet-active{
color:#000;
background-color: #fff;
cursor: auto;
}

然而,当我实际操作的时候,发现样式并没生效,明明class已经加上去了

小记:css特殊性

小记:css特殊性

突然想起早两天看的权威指南,此处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,问题得以解决。