css - 用子跨度的边界覆盖父 div 的边界

Question

我有一个 div，其中嵌套了一行选项卡，如下所示:

<div class="container">
    <div class="menu">
        <span class="tab" />
        <span class="activetab" />
        <span class="tab" />
    </div>
</div>

当一个选项卡处于事件状态时，我们需要在其周围显示一个边框。 container div 也有边框；但是，它需要更轻。所以我们有这样的东西:

.container {border: 1px solid lightgray;}
.activetab {border: 1px solid gray;}

似乎因为容器是事件选项卡的父级，所以它的边框具有优先权，但我们希望显示事件选项卡的较暗边框。我们尝试了边框和轮廓。

帮助!

Answer 1

首先，不确定为什么要在 html 标记中的类名前加一个点..这是否有效？它应该看起来像 <div class="container">然后 .container{....}在 CSS 中。

如果您正在尝试制作 CSS 菜单，那么我建议您使用无序列表，这是非常标准的:

<div class="container">
  <ul class="menu">
    <li>Item 1</li>
    <li class="activetab">Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

然后在你的 CSS 中，像这样:

.container {border: 1px solid lightgray;}
.container ul{list-style:none;}
.container li{float:left;}
.container li.activetab {border: 1px solid gray;}