Question

风格：

#fullmenu li{
    background:red;
    border-bottom:1px solid #000;
}
li.tab a{
    border-left: 1px solid #000;
}
li.tab:hover ul.content{
    display:block;
}
ul.content{
    background:blue;
    border-style:none;
    display:none;
}
ul.content li{
    border: 1px solid #000;
}

列表（一个或多个）：

<ul id="fullmenu">
<li class="tab"><a href=#>A</a>
    <ul class="content">
        <li><a href=#>A.1</a></li>
        <li><a href=#>A.2</a></li>
    </ul>
</li>
</ul>

我遇到的问题是双重的，但似乎受到同样的影响。我试图覆盖背景颜色（在未删节的背景中是渐变。所以不，我只能将它改为＆＃39;蓝色＆＃39;）为ul，＆＃34;类＆＃34 ;. 接下来，它有点难以看到，但左边和下边框不会覆盖并加倍内容li＆＃39;。两者似乎都是继承问题，我无法弄明白。我现在已经淘汰和摆弄了好几个小时，似乎无法让它发挥作用。请帮忙。

Answer 1

由于id选择器优先于类选择器，因此这将修复嵌套列表：

ul#fullmenu ul.content{
    background:blue;
    border-style:none;
    display:none;
}

Answer 2

将您的代码更改为：

＆＃13;

#fullmenu li{
    background:red;
    border-bottom:1px solid #000;
}
li.tab a{
    border-left: 1px solid #000;
}
ul.content{
    border-style:none;
    display:none;
}
#fullmenu ul.content li{
    background:blue;
}
ul.content li{
    border: 1px solid #000;
}
li.tab:hover ul.content{
    display:block;
}

＆＃13;

<ul id="fullmenu">
<li class="tab">
    <a href=#>A</a>
    <ul class="content">
        <li><a href=#>A.1</a></li>
        <li><a href=#>A.2</a></li>
    </ul>
</li>
</ul>

＆＃13;

或者

＆＃13;

#fullmenu >li{
    background:red;
    border-bottom:1px solid #000;
}
li.tab a{
    border-left: 1px solid #000;
}
li.tab:hover ul.content{
    display:block;
}
ul.content{
    background:blue;
    border-style:none;
    display:none;
}
ul.content li{
    border: 1px solid #000;
}

＆＃13;

<ul id="fullmenu">
<li class="tab">
    <a href=#>A</a>
    <ul class="content">
        <li><a href=#>A.1</a></li>
        <li><a href=#>A.2</a></li>
    </ul>
</li>
</ul>

＆＃13;

CSS继承了不覆盖的样式

2 个答案: