前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3的:not(:target)效果

CSS3的:not(:target)效果

作者头像
py3study
发布2020-01-13 12:13:57
5760
发布2020-01-13 12:13:57
举报
文章被收录于专栏:python3python3

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
@keyframes act{
	0%{background:red};
	100%{background:white};
}

li:not(:target){
	animation:act 1s ease-in;
}

进入页面的时候,就会执行li:not(:target),效果在三个li都可用

wKioL1XAR5KSMdoiAAAy4VVdZsM077.jpg
wKioL1XAR5KSMdoiAAAy4VVdZsM077.jpg

一旦点击激活target,li:not(:target)就意味着上一个激活的target:

首先点击a,激活target,li:not(:target)无效果

wKiom1XARZvzsYGAAADOeSB7sD8965.jpg
wKiom1XARZvzsYGAAADOeSB7sD8965.jpg

再点b,在第一个li处出现效果

wKioL1XAR5GwvIjnAADbjWimZ6k209.jpg
wKioL1XAR5GwvIjnAADbjWimZ6k209.jpg

是不是有点坑,呵呵哒。

他的用处就是在手动图片轮播的时候改变z-index的最佳利器!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档