css - 对 CSS 类进行分组以简化样式表

Question

这是我的问题，我正在制作一个带有下拉菜单的导航栏。我已经为列表中的所有 li 开设了一个类(class)。这是它的 CSS。

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li:hover a {
    color:#161616;
}

这是如何实现的。

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 2</a></li>

我想使用上面的 CSS 创建一个名为 nodropdown 的类。这就是我格式化它的方式，但我认为我做的不正确。

#menu li.nodropdown :hover {
    border: 1px solid #777777;
    padding: 4px 5px 4px 5px;
}

#menu li.nodropdown a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    color: #EEEEEE;
}

#menu li.nodropdown :hover a {
    color:#161616;
}

我希望能够像这样调用 nodropdown 类并覆盖 Button 2:

<ul id="menu">
    <li><a href="#">Button 1</a></li>
    <li class="nodropdown"><a href="#">Button 2</a></li> 
    <li><a href="#">Button 2</a></li>

但我认为我为 nodropdown 设置类格式的方式不正确，就在上面是正确的吗？你能帮我纠正一下吗？

Answer 1

分组的思想是将 CSS 类/ID 分组在一起，然后只列出一次公共(public)属性，例如。

/* Attributes for all boxes */
td.Box1, td.Box2, td.Box3 {padding: 3px 6px; font-weight: bold}

/* Unique box attributes */
td.Box1 {background: #fff}
td.Box2 {background: #000}
td.Box3 {background: #ccc}