zoukankan      html  css  js  c++  java
  • 全局a:hover无效,权重问题及解决办法浅析。

    问题浅述:


     最近做项目,为了方便。在初始化公共样式里定义了:

    a:hover{
        color: red;
    }

    开始用的好好的,后面有个列表链接不是默认色。就更改颜色。如下:

    .box li a {
        color: skyblue;
    }

    结果 a:hover 就不生效了???

    问题验证:


     F12 调试,显示是被层叠掉了。因为没有其他 hover ,基本判断 权重 优先级问题

     

    目前 权重:

    .box li a         =12
    a:hover           =11

    为了验证权重问题,我做了一些比较无聊的操作。

    我稍微 改了一下权重:

    目前 权重:

    .box a         =11
    a:hover        =11

    权重一样,样式还是被层叠是因为 先后顺序问题。a:hover是公共样式,引入再页面最前面。

    所以被后来的 样式层叠掉了。

     为了进一步验证,我又稍微 改了一下权重:

    目前 权重:

    .box a            =11
    li a:hover        =12

      结果:全局样式的 a:hover 真的生效了,看来真的是权重问题。

    样式相同时,就看优先级和权重,即便在 :hover 伪类中的样式也是一样。

    问题解决:


    1、如果项目中做的 :hover样式都是一样的。 没有别的色。可以加 ! important; 

      也就是当前属性无穷大的意思。当然,为了标准化,很不推荐这种做法。

    a:hover {
        color: red!important;
    }

    2、如果 a 标签,颜色样式改变。建议重新写 a:hover 样式。

    别偷懒了,也别纠结了,重新写吧。

    by不言谢

    不要和别人比,要赢得是自己。(ง •̀_•́)ง
  • 相关阅读:
    高级查询query
    elasticsearch 复合查询
    第八篇 elasticsearch链接mysql自动更新数据库
    第七篇 elasticsearch 链接mysql不会更新
    第六篇 elasticsearch express 删除索引数据
    koa1创建项目
    第五篇 elasticsearch express插入数据
    hdu3594 Cactus
    hdu2767 Proving Equivalences
    loj2274 「JXOI2017」加法
  • 原文地址:https://www.cnblogs.com/byx1024/p/14123608.html
Copyright © 2011-2022 走看看