时间戳

首页 > 解决方案 > 继承自 CSS ID

css - 继承自 CSS ID

问题描述

从https://github.com/m1cr0lab-esp32/remote-control-with-websocket复制了一个 Arduino 示例。这是为 websockets 使用单个 LED，但我需要多个。后端的东西工作正常。

#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。目前我只是简单地复制了 CSS 的东西 5 次，但必须有更好的方法。

任何人都可以对此有所了解吗？

标签： css

解决方案

将您的 id 更改led为一个类并复制以匹配您需要的灯数（例如，我做了 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>

推荐阅读