Question

这是我的问题我正在制作一个带下拉的导航栏。我已经列出了所有li的课程。这是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组合在一起，然后仅列出一次公共属性。

/* 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}

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

1 个答案: