Question

我已将此添加到我的主页，将Fontawesome Arrow图标的颜色更改为黑色，但我在同一页面上显示另一个箭头，该箭头需要为白色。我添加了什么CSS代码，以使一个箭头保持黑色，另一个箭头显示在同一页面上？

.page-id-45 a.sf-button.sf-button-has-icon > i {
        font-size: 18px;
        margin-left: 10px;
        vertical-align: -3px;
        color: #333;
    }

Answer 1

如果添加~i，它应该将颜色应用于除第一个箭头之外的所有颜色。

.page-id-45 a.sf-button.sf-button-has-icon > i {
    font-size: 18px;
    margin-left: 10px;
    vertical-align: -3px;
    color: #fff; /* Color of the first arrow of you page */
}
.page-id-45 a.sf-button.sf-button-has-icon > i ~ i {
    font-size: 18px;
    margin-left: 10px;
    vertical-align: -3px;
    color: #333; /* Color of all other arrows */ 
}

这更像是一个快速修复，然后是一个很好的解决方案。

Answer 2

您可以将<class=""><style="color: 000;">放入HTML中;内联样式应覆盖类颜色。

如果您经常这样做，我建议进行第二堂课。

CSS中相同元素的不同颜色

2 个答案: