html:
<div> <ul> <li id='li1'>1</li> <li id='li2'>2</li> <li id='li3'>3</li> </ul> <a href='#li1'>a</a> <a href='#li2'>b</a> <a href='#li3'>c</a></div>
CSS:
@keyframes act{ 0%{background:red}; 100%{background:white};}li:not(:target){ animation:act 1s ease-in;}立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
进入页面的时候，就会执行li:not(:target)，效果在三个li都可用
立即学习“前端免费学习笔记（深入）”；
一旦点击激活target，li:not(:target)就意味着上一个激活的target：
首先点击a，激活target，li:not(:target)无效果
再点b，在第一个li处出现效果
是不是有点坑，呵呵哒。
他的用处就是在手动图片轮播的时候改变z-index的最佳利器！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
688
收藏
