颜色继承不同的特性

Question

这是我的代码结构：

<div style="position:relative">
 <div class="divider"></div>
 <span class="fa fa-home" style="position:absolute"></span>
</div>

我需要更改图标颜色（使用font-awesome），这应该与具有“divider”类的div的border-color相同。每当我更改分隔线的边框颜色时，图标颜色应该移动到分隔线的边框颜色。

Answer 1

您可以使用CSS中的+选择器，它会选择elements that is placed immediately after (not inside) the first specified element：

.divider + .fa {
    /* the .fa itself */
}

.divider.blue + .fa {
    /* when .divider has class "blue", apply these rules to "fa" */
}