jquery - 为什么浏览器看不到这个 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);
}

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

Answer 1

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

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

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