是不是觉得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. LINUX增加并管理用户

    使用groupadd命令增加新的用户组 使用useradd命令增加新用户: useradd -s /bin/bash -d /home/XXX -g group username 使用passwd修改 ...

  2. JavaScript对象属性 constructor

     对象属性 constructor 属性返回对创建此对象的数组函数的引用; constructor(构造函数) 在对象创建或实例化时候被调用的方法.通常使用该方法来初始化数据成员和所需资源.构造函数不 ...

  3. 在Java中兼容Windows和Linux的路径处理

    Linux中的路径使用'/',而Windows下正好相反'\',Java提供了以系统属性的方式获取路径分隔符: System.getProperty("file.separator" ...

  4. EasyUI 1.4.4 DataGrid(大数据量) bufferview滚动时不加载下一页数据解决方案

    在使用Easyui DataGrid 过程中,发现若单页数据量超过300,IE浏览器加载速度很慢.也通过网上找寻了很多解决方案,最典型的就是去掉datagrid的自动列宽以及自动行高判断. 1.解决自 ...

  5. visual studio插件 visual assistx

    http://www.wholetomato.com/downloads/CheckForUpdate.asp?v=1925&e=&b=n&r=y&i=10&v ...

  6. ios中模拟延时的几种方法

    - (void)delay1 {     // 延迟执行不要用sleep,坏处:卡住当前线程     [NSThread sleepForTimeInterval:3];     NSLog(@&qu ...

  7. （四）backbone - DEMO - 通信录

    DEMO介绍 是DEMO - User List 的扩展,增加查询 大体实现 •创建Contact Model var Contact = Backbone.Model.extend({ defaul ...

  8. HDU 2896 病毒侵袭 （AC自动机）

    这题模板题.............但是竟然要去重........调试了半天才发现.................... #include <cstdio> #include <i ...

  9. SQL Server 2005无法远程连接的解决方法

    以前一直连接本地的数据库,连接SQL Server 2005是小菜的... 做项目也是老师搭好了服务器端,打上IP去访问就行...也不用考虑太多. 今天自己在公司搭SQL Server 2005服务器 ...

  10. asp.net 的那点事（1、当用户在浏览器地址栏输入了网址后，发生了什么？）

    从今天开始我将抽出空闲时间复习asp.net相关知识.此篇博文只是为了记录学习当中的知识点和感觉到比较重要的知识点. 本人才疏学浅,如有遗漏或者错误希望广大博友尽情拍砖.我会在后续中进行更正. 这个问 ...