Inherit from CSS ID

Question

从https://github.com/m1cr0lab-esp32/remote-control-with-websocket.这是使用一个单独的LED为websocket，但我需要多个。后端的东西工作得很好。

#led {
position: relative;
width: 3em;
height: 3em;
border: 2px solid #000;
border-radius: 2.5em;
background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
#led.on {
background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
#led:after {
content: '';
position: absolute;
top: .3em;
left: 1em;
width: 60%;
height: 40%;
border-radius: 60%;
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}

<div class="panel">
<div id="led" class="%button1%"></div>
<button id="toggle1">Snowman</button>
</div>

我总共有5个LED。目前，我只是简单地复制了5次CSS内容，但必须有更好的方法。

有人能照亮这件事吗？

Answer 1

将您的idled更改为一个类，并重复以匹配您需要的灯光数量(示例中我做了5个(。

此外，为了能够通过JS或CSS单独针对每个led，我会为每个led添加一个唯一的id。

通过将类on添加到元素中，可以打开灯光(请参见示例中的grinch的灯光(。

.led {
position: relative;
width: 3em;
height: 3em;
border: 2px solid #000;
border-radius: 2.5em;
background-image: radial-gradient(farthest-corner at 50% 20%, #b30000 0%, #330000 100%);
box-shadow: 0 0.5em 1em rgba(102, 0, 0, 0.3);
}
.led.on {
background-image: radial-gradient(farthest-corner at 50% 75%, red 0%, #990000 100%);
box-shadow: 0 1em 1.5em rgba(255, 0, 0, 0.5);
}
.led:after {
content: '';
position: absolute;
top: .3em;
left: 1em;
width: 60%;
height: 40%;
border-radius: 60%;
background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
}

<div class="panel">
<div id="led1" class="led" class="%button1%"></div>
<button id="toggle1">Snowman</button>
</div>
<div class="panel">
<div id="led2" class="led" class="%button1%"></div>
<button id="toggle2">Pumpkin</button>
</div>
<div class="panel">
<div id="led3" class="led on" class="%button1%"></div>
<button id="toggle3">Grinch</button>
</div>
<div class="panel">
<div id="led4" class="led" class="%button1%"></div>
<button id="toggle4">Santa on the Roof</button>
</div>
<div class="panel">
<div id="led5" class="led" class="%button1%"></div>
<button id="toggle5">Reindeers</button>
</div>