在列表中设置特定项目符号的颜色

Question

我有这个CSS：

 .list-mark-3 li:before {
   font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

和此HTML：

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li class="makeitwhite">DEF</li>
        <li>GHI</li>
    </ul>
</div>

产生如下内容：

但是，我想用DEF白色作为项目符号和相关文字。只是那一颗子弹。我曾尝试在“ makeitwhite”类，内联样式等中将颜色设置为白色。没事！

有什么建议吗？

Answer 1

您将为此使用nth-child()：

.list-mark-3 li:before {
    font-family: 'Font Awesome 5 Free';
    content: '\f101';
    font-weight: 900;
    font-size: 12px;
    color: white !important;
}

.list-mark-3 li:nth-child(2) {
    color: white;
}

JS Fiddle

要在hover上将其设为白色，请添加以下内容：li:nth-child(2):hover

Answer 2

也许是这样的：

.list-mark-3 li.makeitwhite
    {
        color:white;
    }

Answer 3

尝试嵌入式CSS

<div class="col-sm-5">
    <ul class="list list-mark-3">
        <li>ABC</li>
        <li style="color: white;">DEF</li>
        <li>GHI</li>
    </ul>
</div>