Реализация лампочки средствами CSS

@mrtmaxxx · Регистрация: 06.02.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте. Нужно создать несколько лампочек. Есть код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<style>
.lamp-on {
    background: #00FA15;
    border: 1px solid #2D292E;
    border-radius: 40px;
    box-shadow: 0px 0px 10px 0 #00FA15;
    height: 20px;
    margin: 20px;
    width: 20px; 
    }
 
.lamp-off {
    background: #528B53;
    border: 1px solid #2D292E;
    border-radius: 40px;
    
    height: 20px;
    margin: 20px;
    width: 20px; 
    }
</style>
</head>
<body>
    <div class="lapm-on" id="lamp1"></div>
    <div class="lapm-off" id="lamp2"></div>
    <div class="lapm-off" id="lamp2"></div>
 
</body>
</html>

Не применяются стили, когда в качестве селектора "Класс". Если выборка по "id", то стиль применяется. Не понимаю в чем дело.

@Lazy_Den · 29.12.2014, 12:20

mrtmaxxx, обратите вниамние на значение класса в тегах lapm-on, lapm-off и как они записаны в css: lamp-on, lamp-off. Порядок букв не наталкивает на странные мысли?

И еще один важный момент - у вас два элемента с одинаковыми id ("lamp2"), а такого быть не может.

@mrtmaxxx · 29.12.2014, 12:32 **[ТС]**

Сообщение от Lazy_Den

такого быть не может.

Знаю.
Спасибо. Ох уж эти корпоративы

Ни до чего хорошего не доводят

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	29.12.2014, 12:20
	mrtmaxxx, обратите вниамние на значение класса в тегах lapm-on, lapm-off и как они записаны в css: lamp-on, lamp-off. Порядок букв не наталкивает на странные мысли? И еще один важный момент - у вас два элемента с одинаковыми id ("lamp2"), а такого быть не может. 1