:target 伪类使用技巧
什么是CSS伪类?
通常选择器不能表现HTML元素或属性的状态,我们可以在CSS选择器上添加伪类表示元素的状态、特征。伪类名写在选择器的:冒号后面,必要时可以添加()
,例如:#comments:not(:target)
。
:target
伪类用来指定那些包含片段标识符的 URL 的目标元素样式。 例如:http://www.css88.com/demo/target-selector/#target-test这个 URL 包含了#target-test 片段标识符
。 在HTML中, 标识符是元素的id(或者name属性)。 这个示例 URL 指向的是ID为”target-test”的元素 。看看这个最简单的例子,页面上有个元素,如下:
html 代码:
<div id="target-test">这个元素的id为"target-test"</div>
添加CSS代码:css 代码:
#target-test {background-color: transparent;border-bottom: 3px solid #ffdb3a;font-weight: 700;
}
#target-test:target {background-color: #ffdb3a;
}
点击查看:http://www.css88.com/demo/target-selector/
当然这个是最简单的例子,下面我介绍几个有意思的例子。(例子来自:https://github.com/ireade/demo.bitsofco.de)
例子1:显示/隐藏评论
不用任何javaScript实现显示/隐藏评论效果
主要的html代码:
html 代码:
<a href="#comments">Show Comments</a><section id="comments"> <h3>Comments</h3><!-- Comments here... --><a href="#">Hide Comments</a>
</section>
主要的CSS代码:
js 代码:
#comments:not(:target) {display: none;
}
#comments:target {display: block;
}
具体效果查看:http://www.css88.com/demo/target-selector/hide-show.html
例子2:显示/隐藏屏幕侧边栏
这个比较常见,比较实用,技巧点:边栏高度自适应屏幕(100%),并且固定定位(position: fixed;)。
主要的CSS代码:
css 代码:
#nav {position: fixed;top: 0;height: 100%;width: 80%;max-width: 400px;
}
#nav:not(:target) {right: -100%;transition: right 1.5s;
}#nav:target {right: 0;transition: right 1s;
}
具体效果查看:http://www.css88.com/demo/target-selector/slide-out.html
例子3:显示/隐藏模态框
还有填充屏幕的半透明遮罩层哦
主要的CSS代码:
css 代码:
#modal-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);display: flex;justify-content: center;align-items: center;
}.modal {width: 70%;background: #fff;padding: 20px;text-align: center;
}#modal-container:not(:target) {opacity: 0;visibility: hidden;transition: opacity 1s, visibility 1s;
}#modal-container:target {opacity: 1;visibility: visible;transition: opacity 1s, visibility 1s;
}
具体效果查看:http://www.css88.com/demo/target-selector/modal.html
例子4:显示/隐藏边栏
主要的CSS代码:
css 代码:
#body:not(:target) {main { width: 60%; }aside { width: 30%; }.show-sidebar-link { display: none; }
}#body:target {main { width: 100%; }aside { display: none; }.hide-sidebar-link { display: none; }
}
具体效果查看:http://www.css88.com/demo/target-selector/body.html
实际应用中存在的问题
锚点链接会使页面跳到目标元素的位置,造成用户体验上的不爽;
浏览器前进、后退时候会反复应用:target 伪类效果
关注WEB前端开发官方公众号
关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号
版权声明
本文仅用于学习、研究和交流目的,欢迎非商业性质转载。
转载请注明文章的完整链接:http://www.css88.com/archives/6256
作者(译者): 愚人码头 及 网站出处:CSS88.com
:target 伪类使用技巧相关推荐
- 记录CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个"#"字符,然后后面带有一 ...
- php伪类,CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
- CSS伪类选择器详细讲解
前言 伪类选择器在CSS中起到的作用可以说是至关重要的,如果CSS没有伪类选择器,有很多效果都要借助js来完成,这样不仅代码量增加,维护起来你难度也大.这样程序员的工作量大,也违背了CSS诞生的作用, ...
- 014_CSS伪类选择器
1. 伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素. 2. 所谓伪类选择器, 是相对于"类选择器"来说的.伪类选择器类似于添加类, 所以可以是多个. 3. ...
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- html分为哪两种,css伪类分为哪几种
css伪类分为UI伪类和结构化伪类两种.UI伪类分为链接伪类.focus伪类和target伪类.结构化伪类分为[:first-child].[:last-child]和[:nth-child]. CS ...
- CSS 伪类选择器:如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
- CSS中伪元素、伪类选择器和字体、文本相关属性
CSS中伪元素.伪类选择器 伪元素选择器 伪元素选择器只能针对CSS中已有的伪元素起作用. CSS提供的伪元素选择器有如下几个: :first-letter:对指定对象的第一个字符起作用. :firs ...
最新文章
- Bytom BIP-32协议和BIP-44协议解读
- 制作点击文字变颜色_腾讯的动态时间轴PPT火了!制作简单又有逼格,都学起来啊...
- [Python] 拉格朗日插值
- python程序控制结构与分支的实验报告_Python程序设计实验报告三:分支结构程序设计...
- layer j基本属性
- 李宏毅机器学习——迁移学习
- Java 性能测试的四项原则
- Java Web开发实战(二)—Tomcat安装及环境变量配置
- python调用程序压缩文件_Python在后台自动解压各种压缩文件的实现方法
- 借书表设计 mysql_请设计一套图书馆借书管理系统的数据库表结构
- 手机上怎么访问电脑html页面,手机UC浏览器怎么访问电脑版 访问电脑页面方法...
- 阿里云CTO章文嵩:阿里云强大的数据和计算能力助力企业实现“弯道超车”
- Python小爬虫之协程爬虫快速上手
- python判断语句和循环语句
- 带你玩转kubernetes-k8s(第61篇-Kubernetes之资源紧缺时的Pod驱逐机制)
- 淘宝订单接口|订单插旗备注,淘宝开放平台最稳定的店铺订单接口
- Unity之使用贝塞尔曲线制作图片轮播
- (七)继续对话库检索的闲聊系统
- Android 12.0 系统多个播放器app时,设置默认播放器
- 电子邮件服务器的ip地址_推荐Siteground主机服务器的七个理由
热门文章
- CreateMutex创建互斥内核对象
- ComparerT 与 IComparerT
- 微型计算机实验仪,中小学生学习电子技术及微型计算机基础课程实验仪的制作方法...
- GUI_DOWNLOAD相关
- Wireshark学习
- 【CNN基础】为什么要用较小的卷积核
- ViewModels and LiveData- Patterns + AntiPatterns
- PCB评审及检查规范
- 【NYOJ】题目7街区最短路径
- Java面试三件套:基础+多线程+___?