CSS3的:not(:target)效果

HTML:

	

		1
		2
		3
	
	a
	b
	c

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的最佳利器！

转载于:https://blog.51cto.com/rocker/1681543