当 HTML 遍历 PHP 之后伪类元素失效

Question

问题描述

当在 HTML 标签中遍历从 PHP 获取来的一组数据时，为标签添加的伪元素失效。
我添加 nth-child(1)::after & first-child::after 目的是为了仅显示参考示意图中的第一个，但实际项目中却为每一个标签都添加了伪类元素。
以下为实例代码：

HTML

<ul class="timeline">
    <foreach name="year" item="y" key="key">
        <li class="timeline-item">{$key}</li>
    </foreach>
</ul>

CSS

ul.timeline li.timeline-item:nth-child(1)::after
{
    content: "latest";
    color: var(--uag-green);
}

参考示意图

Answer 1

看生成的代码就比较明显了，css的选择符简化一下是.timeline .timeline-item:nth-child(1)::after，一般在用nth-child时，默认是很多元素并列在一起才会有1,2,3,4的顺序，但是li不是并列的，而是被包含在a标签里边的，所以到这里问题就来了：你用的是包含选择符去精确命中li，但是由于li在每个a标签里都是nth-child(1)，所以每个li都会挂一个after伪元素。

所以建议，将li和a标签调换下位置，写成更复合标准的ul>(li>a>{$月})*n这样的结构。

Answer 2

你生成的html代码，你自己对比一下