CSS基于父div

Question

不确定我的标题是否传达了我的整体问题，但现在就这样了。

我的HTML与此类似：

<div id="nav">
    <ul id="menu">
        <li><a href="#">Menu Item</a></li>
        <li><a href="#">Another Menu Item</a></li>
    </ul>
</div>

一些CSS：

#menu {
    font-family: Arial;
    font-size: 12px;
}
#menu > li > a {
    color: #fff;
}
#menu > li:hover > a {
    color: #fff;
    text-decoration: underline;
}

在我的主页上，我将链接设置为Color：White; 我想只在几个产品页面上将class =“productmenu”添加到父div，并让我的css将菜单字体颜色更改为黑色。

<div id="nav" class="productmenu">

我将如何做到这一点？

谢谢！

Answer 1

再添加一条CSS规则：

.productmenu #menu > li > a {
    color: #000;
}

Answer 2

您可以简单地将ID选择器#和类选择器.组合在一起：

#nav.productmenu #menu > li > a {
    color: #000000;
}