是不是觉得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. django: startproject

    python 的 django 框架的安装教程很多,这里不列举安装过程,直接开始记开发应用过程. 1  startprojec,新建项目 $ django-admin.py startproject ...

  2. Html.Action和Html.RederAction来创建子视图

    1. 父视图和子视图 父视图是包含了调用返回子视图的动作方法的视图. 父视图包含大部分用于呈现页面的HTML.子视图仅包含用于展示视图某部分的必须的标记. 例如,一个子视图创建一个列表,视图可能仅仅包 ...

  3. node.js 上传文件

    在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件,  用nodejs的话,  相当于模拟浏览器的行为. google 了一番之后,  明白了浏览器无非就 ...

  4. 自己手动绿色化MyEclipse

    绿化过程因每个人的文件存放路径不同而不同 首先打开你解压的MyEclipse文件,或者以前安装的MyEclipse重装系统后不能用,打开到这里:记住路径,比如我的是:D:\MyEclipse 我们打开 ...

  5. myEclipse笔记（1）：优化配置

    一．设置字体 Window->Preferences->General->Appearance->Colors and Fonts 在右侧找到”Aa Test Font”双击或 ...

  6. defer和async

    1.decument.wirte不能使用 2.<script src="text.js" type="text/javascript" defer=&qu ...

  7. OpenCV——识别手写体数字

    这个是树莓派上运行的, opencv3 opencv提供了一张手写数字图片给我们,如下图所示,可以作为识别手写数字的样本库. 0到9共十个数字,每个数字有五行,一行100个数字.首先要把这5000个数 ...

  8. android图形基础知识

    Android核心分析(23)-----Andoird GDI之基本原理及其总体框架 2010-06-13 22:49 18223人阅读 评论(18) 收藏 举报 AndroidGDI基本框架 在An ...

  9. C#Mysql数据库爆破源码

    声明: 代码仅供学习参考使用!开启了一个子线程,进行爆破! 速度不是很快,代码不是很规范,希望大牛不要喷我! c#控制台程序,需要引用MySql.Data.dll 默认用户名: root密码字典: p ...

  10. 无法更新 EntitySet“Ips_Articles”，因为它有一个 DefiningQuery，而 <ModificationFunctionMapping> 元素中没有支持当前操作的 <InsertFunction> 元素。

    今天我在使用ef的时候,发现了这样的报错. 无法更新 EntitySet“Ips_Articles”,因为它有一个 DefiningQuery,而 <ModificationFunctionMa ...