Question

我有一些元素，通过Jquery添加：

$('body').delegate('.tutorial_links', 'click', function(){
        var $tutorial_hider="<a href='#' class='hider_tutorial' data-method='delete' data-remote='true' rel='nofollow' style='display:inline-block; background-color:#68d574;  width:"
        $width=$(this).parent().width()
        $tutorial_hider=$tutorial_hider+$width+"px'></a>"
        $(this).css('display', 'none');
        $(this).before($($tutorial_hider));
    })

哪个有相对的CSS：

.hider_tutorial{
    height: 15px;
    vertical-align: -1px;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    padding-top: 0;
}

.hider_tutorial:hover{
 background-color: rgba(214, 19, 84, 0.70);
}

如果仅hider_tutorial的CSS工作，浏览器就看不到.hider_tutorial:hover（当我在Chrome或Firefox中检查元素时，.hider_tutorial:hover没有任何内容）。

Answer 1

打开开发者控制台
点击元素
点击右侧面板中的箭头点 - ＆gt;切换元素状态

截图： http://imgur.com/7ErrNTF

Answer 2

内联样式优先于所有其他CSS规则。也就是说，background-color:#68d574属性中定义的style属性的优先级高于.hider_tutorial或.hider_tutorial:hover中的属性。 Check out this fiddle并悬停两个链接。第一个链接按预期更改背景颜色，而第二个链接始终具有重写的颜色。

有一些方法可以解决这个问题：

使用类而不是手动应用样式。这确保了“普通”优先级规则适用（因为没有内联样式优先）并且它使代码更清晰（所有样式都包含在CSS文件中，而不是分散在整个CSS和JavaScript代码中）。 LI>
使用background-color使.hider_tutorial:hover中的!important属性变得重要。这在我的书中更像是一个肮脏的修复，因为当您发现自己需要覆盖!important属性时，!important可能迟早会适得其反。

为什么浏览器看不到这个CSS属性

2 个答案: