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

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);
}

如果只是CSS hider_tutorial工作，浏览器只是看不到.hider_tutorial:hover(当我在Chrome或Firefox中检查元素时，没有关于.hider_tutorial:hover)。

Answer 1

内联样式优先于所有其他CSS规则。也就是说，在style属性中定义的background-color:#68d574属性具有比.hider_tutorial或.hider_tutorial:hover中的属性更高的优先级。看看这个小提琴和悬停两个链接。第一个链接按预期更改背景颜色，而第二个链接始终保留其覆盖的颜色。

有一些方法可以绕过这个:

• 使用类代替手动应用样式。这确保了"正常"的优先规则适用(因为没有内联样式优先)，它使代码更干净(所有的样式都包含在CSS文件中，而不是分散在整个CSS和JavaScript代码中)。
• 使.hider_tutorial:hover中的background-color属性在!important中重要。在我的书中，这更像是一个肮脏的修复，因为当你发现自己需要覆盖!important属性时，!important迟早会适得其反。

Answer 2

1. 开放开发者控制台
2. 点击
元素
3. 点击右边面板的箭头点->切换元素状态

截图:https://i.stack.imgur.com/LZMGv.jpg