css - CSS 未在动态 smarty 模板元素上呈现

Question

我的 smarty 模板中有一个带有动态类的动态跨度。这里的问题是分配给这些类的 CSS 没有呈现。如果我将其设置为静态，则一切正常，但当更改为动态时，它将不再起作用。我猜在渲染元素之前首先加载 CSS。什么是一个好的解决方法？

聪明的：

<div id="wrapper">
  <div id="word">
    {counter start=9 print=false}
    {foreach from=$currentUser item=name}
        <span class="{counter}">{$name}</span>
    {/foreach}
  </div>
</div>

未呈现的 CSS：

#word span.l0 {
  animation-delay: 0s;
}
#word span.l1 {
  animation-delay: 0.375s;
}
#word span.l2 {
  animation-delay: 0.75s;
}
#word span.l3 {
  animation-delay: 1.125s;
}
#word span.l4 {
  animation-delay: 1.5s;
}

Answer 1

试试这个 HTML 代码：

<div id="wrapper">
    <div id="word">
        {foreach from=$currentUser item=name key=i}
            <span class="span.l{i}">
                {$name}
            </span>
        {/foreach}
    </div>
</div>