是不是觉得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的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. CSS动态伪类选择器温故-3

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  3. CSS动态伪类选择器温故

    动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...

  4. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  5. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  6. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  9. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

随机推荐

  1. Oracle除去换行符的方法

    Oracle除去换行符的方法   很多数据存进数据库后,可能需要将整条数据取出,并用特殊 符号分割,而且整条数据必须是处于一行,如此,如果数据出现 换行的情况,那么读取时就有问题.     这个时候就 ...

  2. iOS9新特性之UIStackView

    同iOS以往每个迭代一样,iOS 9带来了很多新特性.UIKit框架每个版本都在改变,而在iOS 9比较特别的是UIStackView,它将从根本上改变开发者在iOS上创建用户界面的方式.本文将带你学 ...

  3. 网站压缩数据 GZIP

    //1.被压缩数据 String str="Hello 你好Hello 你好Hello 你好Hello 你好Hello 你好Hello 你好Hello 你好Hello 你好Hello 你好H ...

  4. （转）yum 和 apt-get 用法及区别

    原地址:http://www.cnblogs.com/adforce/archive/2013/04/12/3017577.html 一般来说著名的linux系统基本上分两大类:  1 RedHat系 ...

  5. SVN搭建本地版本控制仓库

    1.安装TortoiseSVN 2.新建一个文件夹,比如F:\SvnProjectsCfg 3.在F:\SvnProjectsCfg新建一个文件夹project1,右键该文件夹选择“create re ...

  6. php之类，对象（四）加载类及练习题

    一.加载类:1.命名类文件的时候每个单词首字母大写,后面缀上.class.php eg: Info.class.php 在写编码时定义类名首字母大写,定义变量名小写 eg:class Ren { pu ...

  7. php提取身份证号码中的生日日期以及验证是否为未成年人的函数

    php 提取身份证号码中的生日日期以及确定是否成年的一个函数.可以同时确定15位和18位的身份证,经本人亲测,非常好用,分享函数代码如下: <?php //用php从身份证中提取生日,包括15位 ...

  8. Scala学习笔记--Akka

    待完成 http://www.gtan.com/akka_doc/ http://my.oschina.net/mingdong/blog/297972 http://www.jdon.com/con ...

  9. 部署在腾讯云的公益网站遭受了一次CC攻击

    版权声明:本文由黄希彤  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/651089001483090830 来源:腾云阁 ...

  10. 需要熟悉的几个调试命令：objdump/pmap/ldd/stace

    最近要编译很多库,还涉及到若干进程操作,所以就把相关的命令记录下来. 一,objdump命令 该命令适用于ELF可执行文件,常用的命令如下: objdump -h xx.o : 输出ELF文件的各个段 ...