无法覆盖CSS伪元素:before

Unable to override CSS pseudo element :before

本文关键字：元素 before CSS 覆盖      更新时间：2023-09-26

我有几个无序的列表项，它们指定密码的规则，并使用字体真棒在所有列表项前面显示一个图标，当我点击按钮时，我有javascript调用来检查规则是否满足，根据条件，我必须更改字体真棒图标，请参阅下面的代码

 li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px;
    }
    li:before {
        position: absolute;
        top: 0;
        left: 0;
        font-family: FontAwesome;
        content: "'f056";
        color: dimgray;
    }
    .myClass{
        position: absolute;
        top: 0;
        left: 0;
        font-family: FontAwesome !important;
        content: "'f058" !important;
        color: forestgreen;
    }

要覆盖li:before，我有空闲代码

$("#limsg").addClass("myClass");

我应该怎么做才能在运行时获得不同字体的图标？

您的代码是正确的，但要覆盖li：before，您需要在之前使用myClass:

 .myClass:before{
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome !important;
    content: "'f058" !important;
    color: forestgreen;
}

你可以查看plunkr了解详细信息。https://plnkr.co/S41mrN

相关文章：