应用于第一个和最后一个列表项，顺风css

Question

我正在生成一个11/nunchucks列表，需要使用tailwind对第一项和最后一项进行样式化。然而，由于某些原因，它将样式更改应用于列表中的每个项目。

下面是我的代码:

<ul role="list" class="">
{% for contact in contacts %}
<a rel="me" class="" href="{{ contact.link }}">
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</li></a>
{% endfor %}
</ul>
</div>

Answer 1

将first:bg-red-300和last:bg-cyan-300应用于每个li元素，因为在a元素中只有一个li。

你要做的是将a包裹在li元素中像这样:

<ul role="list" class="">
{% for contact in contacts %}
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
<a rel="me" class="" href="{{ contact.link }}">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</a>
</li>
{% endfor %}
</ul>