如何使CSS值唯一（不与任何其他html节共享）

我的网站上到处都是图标（字体很棒）。我知道如何使用CSS改变它们的颜色，但问题是它改变了它们

例如，我需要页脚的颜色为白色（查看下面的图片），而其他站点部分中的其他颜色保持原始颜色

我该怎么做

我的HTML页脚

<footer id="footer">
                        <div class="inner">
                            <ul class="icons social">
                                <li><a href="#" class="icon alt fa-linkedin fa-2x"><span class="label">Linkedin</span></a></li>
                                <li><a href="#" class="icon alt fa-twitter fa-2x"><span class="label">Twitter</span></a></li>
                                <li><a href="#" class="icon alt fa-facebook fa-2x"><span class="label">Facebook</span></a></li>
                                <li><a href="#" class="icon alt fa-youtube fa-2x"><span class="label">YouTube</span></a></li>
                                <li><a href="#" class="icon alt fa-flickr fa-2x"><span class="label">Flickr</span></a></li>
                            </ul>
                        </div>
                        <p class="copyright">&copy; STOPTRANS INTERNACIONAL II - 2017 All Rights Reserved.</p>
                    </footer>

---

尝试

#footer.icon{color:white}

查看我使用的悬停颜色更改：

#footer .icon:hover {color:#A6A6A6}

---

工作完美，悬停的颜色怎么样，只对页脚？如果我希望每个图标有不同的悬停颜色？悬停的颜色也是一样的，只需使用现有规则，复制它，并在它前面加上

#footer

。如果希望每个悬停颜色不同，则必须使用ID、类或伪类（如

：nth-child（）

）来选择它们。在我上面的回答中，您正在增加CSS选择器规则的特殊性，以便它覆盖您设置的其他规则。

#footer .icon:hover {color:#A6A6A6}