CSS 基于父 div答案

【问题标题】：CSS Based on parent divCSS 基于父 div
【发布时间】：2014-12-31 06:52:22
【问题描述】：

不确定我的标题是否反映了我的整体问题，但这里是。

我有类似这样的 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;
}

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

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

我该怎么做呢？

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

再添加一条 CSS 规则：

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

【讨论】：

好吧，你太棒了！我一直在尝试不同的课程和身份组合，但由于某种原因，从未尝试过。感谢 DFSQ！

【解决方案2】：

您可以像这样简单地组合 id 选择器 # 和类选择器 .：

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

【讨论】：

谢谢蒂莫！我也很欣赏这个答案。