专栏首页python3CSS3的:not(:target)效果

CSS3的:not(:target)效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第3章 排列清单控制标记

    排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另外一种列表。对于概况因特网上的内容,列表特别重要。

    py3study
  • pyhon 列表的增删改查

    py3study
  • python基本数据类型(二)-python

    py3study
  • JS示例20-如何读取父节点parentNode

    专注APP开发
  • bootstrap 多内容页脚

    用户5760343
  • bootstrap 分页

    <div class="row pagination-wrap"> <ul class="pagination"> <li><a href="#"><spa...

    用户5760343
  • bootstrap 面包屑导航栏 常用样式

    <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">2013</a>...

    用户5760343
  • 从零开始学 Web 之 jQuery(二)获取和操作元素的属性

    DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。

    Daotin
  • Jquery 获取第一个子元素

    <ul>   <li>John</li>   <li>Karl</li>   <li>Brandon</li> </ul> 获取第一个元素:  $("ul li...

    庞小明
  • 你真的理解HTML5标签语义化吗?

    <head>标签用于定义文档的头部,它是所有头部元素的容器。<head>描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。...

    陈大鱼头

扫码关注云+社区

领取腾讯云代金券