欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3的:not(:target)效果_html/css_WEB-ITnose

程序员文章站 2022-05-03 11:10:19
...
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的最佳利器!