覆盖父格的边框与子跨度的边界

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">，然后在CSS中的.container{....}。

如果你想使一个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;} 

Answer 2

您对此类的主要问题属性。不要放。在HTML：

<div class=".container"> 

应该

<div class="container"> 

之后，你不应该有与border-color值的任何问题。只要你的选择器是明确的，而不是一般的，就不会有混淆：

.container { border:1px solid red; } 
.activetab { border:1px solid green; } 

这应该正确渲染。但请记住，类只有一个前缀。 （点）在你的选择器，而不是你的HTML。