［转］CSS目标伪类E:target
是不是觉得target有点眼熟?!
今天要讲的不是HTML的<a>标签里面有个target属性。
target伪类是css3的新属性。
说到伪类，对css属性的人肯定都知道:hover、:link、:visited、:focus等等，target用法跟他们是同出一辙的。
官方定义是：
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。
如果你是第一次看到这个定义，是不是有点懵？！没关系~程序员要用代码来交流。举个栗子。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html><html><head><style>:target{border: 2px solid blue;}</style></head><body><p><a href="#news1">跳转至内容 1</a></p><p><a href="#news2">跳转至内容 2</a></p><p id="news1"><b>内容 1...</b></p><p id="news2"><b>内容 2...</b></p></body></html> |
看完代码是不是没feel?~That's all right.一起来看效果图。
初始化是这样的：
当我点击“跳转至内容 1”的时候，变成了这样：
有木有feel到target跟其他伪类的与众不同?!
哈哈~来，直接切入要讲的主题！！！
利用target的特性，可以实现纯css的tab效果切换。
利用target的特性，可以实现纯css的tab效果切换。
利用target的特性，可以实现纯css的tab效果切换。
（重要事情说三遍！）
［转］CSS目标伪类E:target的更多相关文章
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
随机推荐
- （转）url重写
使用URLRewriter.dll后,根本不需要使用任何代码,我之前做的项目就是用的做URL重写的,其实不是进化,其实表面上看是.html扩展名而已,当然你还可以用其他的任意扩展名下面是你的配置 &l ...
- 修改Sharepoint 文档库列表点击Excel文件默认跳转到Excel Service服务 xlviewer.aspx页面
在Sharepoint 文档库中,当点击库中的一个Excel文件时,Sharepoint默认为转跳到Excel Services上,无论是Sharepoint 的是否开启了Excel Service, ...
- string.Format 指定字符串宽度
语法: { index[,alignment][:formatString]} index,为索引号,不用多说. alignment,是一个带符号的整数,绝对值的大小表示字段的宽度. formatSt ...
- .net framework 注册到IIS上
首先要安装好所需的IIS版本和.net framework 各版本,注册方式如下: 1.1:C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\aspnet_re ...
- ICP编程软件配置（烧写KEIL编译后的bin文件）
1. 安装NuMicro_ICP_Programming_Tool_1.29.6425软件 2. 打开软件后选择目标芯片后点击“连接”按钮 3. 添加程序 4. 点击设定按钮进行设定 5. 点击开始 ...
- 今日分享一点干货。PHP中课程表的实现。
首先贴代码,代码贴完再细说: 前段HTML: <div id="studentRead" class="reading" style="z-in ...
- dede留言板BUG解决
dede留言板刷新后空白BUG解决 DEDE留言板验证码留空或者不正确返回空白页面的解决方法 解决方法如下进入文件/plus/guestbook.php 找到代码ShowMsg("验证码不正 ...
- 一个基础的CURL类
/** * 一个基础的CURL类 * * @author Smala */ class curl{ public $ch; public $cookie = '/cookie'; public $rs ...
- ASP.NET MVC 4.0的Action Filter
有时候你想在调用action方法之前或者action方法之后处理一些逻辑,为了支持这个,ASP.NET MVC允许你自定义创建action过滤器.Action过滤器是自定义的Attributes,用来 ...
- Android热补丁动态修复
1.前言 由于公司项目中使用到热修复技术,之前对这块技术知之甚少,所以有时间去学习了解了一下. 2.学习资源 2.1 热修复介绍 还是鸿洋老师的精彩讲解,中间引用了Andorid dex分包方案和QQ ...