Вопрос о классах в CSS

Question

Вопрос о классах в CSS

Евгений Клинков Мыслитель (8916), открыт 2 недели назад

Здрасте!

Вот этот код
<style>

#warp{
border:3px solid purple;
width:900px;
height: 500px;
}

.red, .navy, .green{
width:90px;
height:60px;
}

.red{ background: red};
.navy{ background: navy};
.green{ background: green};

</style>

<div id="warp">
<div class="red"></div>
<div class="navy"></div>
<div class="green"></div>
</div>

выводит на экран маленький красный див, а другие не выводит.
Подскажите, пожалуйста, почему?

Answer 1

Проблема в вашем CSS коде - вы поставили точку с запятой после закрывающей фигурной скобки в определениях классов. Это синтаксическая ошибка.

Вот исправленный код:

 .red{ background: red; }  
.navy{ background: navy; }  
.green{ background: green; }

Точка с запятой ставится внутри фигурных скобок после каждого свойства, но не после закрывающей скобки. Из-за этой ошибки браузер правильно интерпретирует только первый класс (.red), а остальные игнорирует.

После этой коррекции все три цветных блока должны отобразиться корректно.