共计 1785 个字符，预计需要花费 5 分钟才能阅读完成。
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：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 的脚步
