zoukankan      html  css  js  c++  java
  • 小记: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,问题得以解决。

  • 相关阅读:
    uva 550
    uva 10110
    uva 10014
    uva 10177
    uva 846
    Dear Project Manager, I Hate You
    创业型软件公司的心得
    架构设计的心得
    程序员常去的103个网站
    66个经典源码网站
  • 原文地址:https://www.cnblogs.com/jelly7723/p/5665357.html
Copyright © 2011-2022 走看看