css - 如何在 CSS 中执行类似 #Card%{ } 的操作

Question

这是我的CSS：

<div id="Card0">
  <div draggable="true" id="carte">
    <div id="no">8</div>
    <div id="Trefle"></div>
  </div>
 </div>

我将拥有 Card1、Card2 ...

我想做类似 #Card%{ } 的事情有可能吗？

Answer 1

正如 Tomas 和 Joe 已经评论的那样，您不能真正用纯 CSS 编写任何脚本。您可以执行以下任何操作：

• 给每张卡一个类别和目标——这可能是最好的方法。
• 将所有卡片放入容器中，然后使用类似#cards > div.
• 使用 LESS 或 SASS 之类的预处理器，它们采用 less/sass 脚本并将它们编译成常规的 CSS 文件。
• 用于div[id^=Card]定位 ID 以“Card”开头的每个 div。

Answer 2

毫无疑问，您会为此使用一个类：

<div id="Card0" class="card">
  <div draggable="true" id="carte0">
    <div id="no">8</div>
    <div id="Trefle"></div>
  </div>
 </div>

<div id="Card1" class="card">
  <div draggable="true" id="carte1">
    <div id="no">8</div>
    <div id="Trefle"></div>
  </div>
 </div>

<div id="Card2" class="card">
  <div draggable="true" id="carte2">
    <div id="no">8</div>
    <div id="Trefle"></div>
  </div>
 </div>