перекрывая границы родительского 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;} 

Answer 2

Ваша основная проблема с этим атрибутом вашего класса. Не ставьте. в HTML:

<div class=".container"> 

Должно быть

<div class="container"> 

После этого, вы не должны иметь никаких проблем с border-color значениями. Пока ваши селекторы являются явными, а не общие, не будет путаницы:

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

Это должно отображаться правильно. Но помните, что классы имеют только префикс a. (точка) в ваших селекторах, а не в HTML.