V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
gdtv
V2EX  ›  CSS

请问设置 a 的默认颜色怎样可以不覆盖 a:hover 的样式?

  •  
  •   gdtv · 2017-07-09 00:28:37 +08:00 · 4813 次点击
    这是一个创建于 2699 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我希望页面上所有超链接在鼠标移过的时候都显示红色。

    CSS:

    a:hover {
        color: #FF0000;
    }
    .myid1 a {
        color: #000000;
    }
    .myid2 a {
        color: #CCCCCC;
    }
    /* 必须要添加下面这个样式才能让超链接在鼠标移过时显示红色,有办法可以省略吗? */
    .myid1 a:hover, .myid2 a:hover {
        color: #FF0000;
    }
    

    HTML:

    <a>aaaaaa</a>
    <div class="myid1">
    	<a>bbbbbb</a>
    </div>
    <div class="myid2">
    	<a>cccccc</a>
    </div>
    
    第 1 条附言  ·  2017-07-09 01:28:44 +08:00

    感谢 @xbb7766 已解决

    6 条回复    2017-07-09 01:39:14 +08:00
    lhx2008
        1
    lhx2008  
       2017-07-09 00:43:36 +08:00 via Android
    把 a:hover {放在最下面?
    xbb7766
        2
    xbb7766  
       2017-07-09 00:52:29 +08:00   ❤️ 1
    a:hover 的 color 最后加!Important 看看。
    xbb7766
        3
    xbb7766  
       2017-07-09 00:53:05 +08:00
    a:hover {
    color: #FF0000!Important;
    }
    geelaw
        4
    geelaw  
       2017-07-09 01:01:24 +08:00
    a:not(:hover)
    gdtv
        5
    gdtv  
    OP
       2017-07-09 01:28:54 +08:00
    @xbb7766 谢谢,你的方法有效
    liyuhang
        6
    liyuhang  
       2017-07-09 01:39:14 +08:00   ❤️ 2
    :hover - CSS | MDN ( https://developer.mozilla.org/zh-CN/docs/Web/CSS/:hover
    hover CSS 伪类适用于用户使用指示设备虚指一个元素(没有激活它)的情况。这个样式会被任何与链接相关的伪类重写,像:link, :visited, 和 :active 等。为了确保生效,:hover 规则需要放在:link 和:visited 规则之后,但是在:active 规则之前,按照 LVHA 的循顺序声明:link -:visited -:hover -:active。

    styleguide/css.md at master · fex-team/styleguide ( https://github.com/fex-team/styleguide/blob/master/css.md#35-important
    必须注意的是,仅在设计上 确实不允许任何其它场景覆盖样式 时,才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。

    A:
    .myid1 a {
    color: #000000;
    }
    .myid2 a {
    color: #CCCCCC;
    }
    a:hover {
    color: #FF0000;
    }

    B:
    a:hover {
    color: #FF0000;
    }
    .myid1 a {
    color: #000000;
    }
    .myid2 a {
    color: #CCCCCC;
    }
    .myid1 a:hover {
    color: #FF0000;
    }
    .myid2 a:hover {
    color: #FF0000;
    }

    C:
    a:hover {
    color: #FF0000 !important;
    }
    .myid1 a {
    color: #000000;
    }
    .myid2 a {
    color: #CCCCCC;
    }
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1086 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 22:30 · PVG 06:30 · LAX 14:30 · JFK 17:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.