css - CSS中相同元素的不同颜色

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 */ 
}

它更像是一个快速修复，而不是一个好的解决方案。