Question

我有这个代码目前不起作用，有什么替代品吗？

<ul class="sub">
 {% for key, c in categori %}
     <style>
         #nav.{{c.id}}:hover
         {
           background-color: #{{c.color}};
         }
     </style>
        <li class="{{c.id}}">
            <a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
....

我遇到#anf中的问题。 {{c.id}}

ow.ly/i/3vwNp这是一个例子

谢谢！

Answer 1

编写CSS的方式，它期望具有类{{ c.id }}的元素（由Twig解析器解释）与id nav在同一元素上，例如。

<li id="nav" class="{{ c.id }}">...</li>

在页面上不应该有多个具有相同id属性的元素，JavaScript会发生奇怪的事情，特别是当你这样做时。

不是尝试以编程方式在样式中定义{{ c.id }}，而是为什么不做这样的事情呢？

<style>
  #nav .item:hover
  {
    background-color: #{{c.color}};
  }
</style>
...
<ul id="nav" class="sub">
{% for key, c in categori %}
  <li class="item {{c.id}}"><a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}</li>
{% endfor %}
</ul>

您真的应该只在文档顶部的<style>标记中放置CSS，或者更好地将它们取出来放到.css要包含的资源文件中。

Answer 2

这肯定有用：

<ul class="sub">
{% for c in categori %}
  <style>
     .element{{c.id}} a:hover { background-color: #{{c.color}}; }
  </style>
  <li class="element{{c.id}}">
    <a href="{{ path('categoria', {'id': c.id} )}}">{{ c.nombre }}
...

但是建议将CSS规则与HTML分开，并将所有预定义的元素类移动到外部CSS资源。

我可以在CSS中包含代码吗？

2 个答案: