覆蓋父格的邊框與子跨度的邊界

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。