鍍金池/ 問答/HTML5  PHP  HTML/ 當(dāng) HTML 遍歷 PHP 之后偽類元素失效

當(dāng) HTML 遍歷 PHP 之后偽類元素失效

問題描述

當(dāng)在 HTML 標(biāo)簽中遍歷從 PHP 獲取來的一組數(shù)據(jù)時(shí)，為標(biāo)簽添加的偽元素失效。
我添加 nth-child(1)::after & first-child::after 目的是為了僅顯示參考示意圖中的第一個(gè)，但實(shí)際項(xiàng)目中卻為每一個(gè)標(biāo)簽都添加了偽類元素。
以下為實(shí)例代碼：

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);
}

參考示意圖

clipboard.png

回答
編輯回答
膽怯

你生成的html代碼，你自己對比一下

2017年3月9日 13:02
編輯回答
溫衫

看生成的代碼就比較明顯了，css的選擇符簡化一下是.timeline .timeline-item:nth-child(1)::after，一般在用nth-child時(shí)，默認(rèn)是很多元素并列在一起才會(huì)有1,2,3,4的順序，但是li不是并列的，而是被包含在a標(biāo)簽里邊的，所以到這里問題就來了：你用的是包含選擇符去精確命中l(wèi)i，但是由于li在每個(gè)a標(biāo)簽里都是nth-child(1)，所以每個(gè)li都會(huì)掛一個(gè)after偽元素。

所以建議，將li和a標(biāo)簽調(diào)換下位置，寫成更復(fù)合標(biāo)準(zhǔn)的ul>(li>a>{$月})*n這樣的結(jié)構(gòu)。

2017年2月2日 02:30