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

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