如何仅在某些锚上应用CSS

我有一个3页的网站。

• https://mywebsite.com/#
• https://mywebsite.com/#features
• https://mywebsite.com/#download

我想更改一些基于我所在位置的CSS。

下面是一个例子,说明我在做什么,我得到什么,我期望什么。

#header-outer #social-in-menu a i::before{
    color: #000000;
}

这确实会将社交按钮的颜色更改为黑色,但在每个锚上都是如此。我试着把它包起来 a[href*="features"] 这样,它只会改变功能链接,但社交图标仍然是白色的。

这就是我努力实现的目标 show social icons black only in #features anchor .

a[href*="features"] {
    #header-outer #social-in-menu a i::before{
        color: #000000;
    }
}

这个没有效果。什么都不改变。然而,CSS的第一部分将图标更改为黑色,但在所有锚定上。

我怎样才能做到这一点?

我试图得到的最终结果是:

a[href*="features"] {
    #header-outer #social-in-menu a i::before{
        color: #000000; /* could be a different colour */
    }
}


a[href*="download"] {
    #header-outer #social-in-menu a i::before{
        color: #FFFFFF; /* could be a different colour */
    }
}