大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜爱我的文章，能够关注➕ 点赞 加我微信：frontendpicker，一起学习交换前端，成为更优良的工程师～关注公众号：搞前端的半夏,理解更多前端常识! 点我摸索新世界！
原文链接 ==>http://sylblog.xin/archives/57
前言
在正式学习:target 之前，咱们先来学习一下网页开发中的锚点。
上面是百度百科的介绍：
现代的锚是一块大石头，或是装满石头的篓筐，称为”碇“。碇石用绳系住沉入水底，依其分量使船停泊。起初有木爪石锚，即在石块两旁系上木爪，靠分量和抓力使船停泊。中国南朝已有对于金属锚的记录。中国现代帆船应用四爪铁锚，这种锚性能低劣，在舢板和小船上仍有应用。
当你想乘船的时候，船在湖上飘着，无奈登船，此时锚的作用就施展进去了，只有拉一下绳子，船就过去了！！！
网页开发中的锚点：网页内设置的一个地位，点击链接能够跳转到指定地位
以掘金文章详情页为例,左边侧边栏有目录，当你点击其中的一个目录是不是会跳转到具体的内容。
有没有人好奇时如何实现的呢，没错就是锚点：通过 a 标签的 href 跳转到对应 id 的元素。
<a href="#heading-2" title="语法"> 语法 </a><h2 data-id="heading-2">语法</h2>那么:target 跟这个有什么关系呢？？？往下看！！！
:target
代表一个惟一的页面元素(指标元素)，其 id 与以后 URL 片段匹配 。
是不是有点难了解，其实也很简略，这里的:target 指的就是 h2，
heading-2:target{}<h2 data-id="heading-2">语法</h2>target 选择器用于选取以后流动的指标元素
用法
对应 id
能够依据 id，设置指标元素跳转后的式样。
#header:target{ color:red;}<a href="#header">跳转</a><h2 id='header'>指标</h2>开始的时候指标是彩色的，当你点击跳转按钮后，页面跳到指标，且指标变成红色！
全局
:target{ color:red;}留神察看字体色彩的变动。
实战
滑出式导航抽屉
- 首先定义一个导航栏nav.
#nav { padding: 0px; position: fixed; height: 100%; top: 0; left:0; width: 100px; background: #2ecc71;}- 定义一个a标签关上导航
<a href="#nav">关上</i></a>- 当关上导航的时候应用target
#nav:target { left: 0; transition: left 1s;}- 敞开的时候应用not(target)
#nav:not(:target) { left: -100%; transition: left 1.5s;}成果：
残缺代码：
tab切换
tab切换其实有很多种实现形式，纯CSS，JS市面上的解决方案形形色色，既然介绍到了:target,天然就要用它来做了。
整体的解决方案是：:target + z-index
先简略的说下原理：
:target只对以后激活的指标元素失效，所以只有激活的元素领有z-index属性。
1.创立tab选项
<a href="#tab-one">tab1</a><a href="#tab-two">tab2</a><a href="#tab-three">tab3</a>- 创立内容
<div class="tab-content"> <div id="tab-one">我是tab1</div> <div id="tab-two">我是tab2</div> <div id="tab-three">我是tab3</div></div>
这里咱们设置了div的高度与父元素保持一致，并且未知绝对于父元素是固定的，所以只有第三个显示进去。
- 外围 :target+z-index
#tab-one:target,#tab-two:target,#tab-three:target { z-index: 1;}成果：
简简单单的几行代码就能够实现tab的切换，我感觉很OK!,当然这个例子还有很多货色没有解决，比方选中后tab的款式等等，大家能够试着欠缺。
后记
javascript操作CSS的确不便简洁，容易实现，然而随着CSS的不断完善，越来越多的性能能够用CSS实现，大家要跟紧CSS的脚步