13518219792
大家好，我是半夏????，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 ???? 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
创新互联于2013年创立，公司以成都网站建设、网站设计、系统开发、网络推广、文化传媒、企业宣传、平面广告设计等为主要业务，适用行业近百种。服务企业客户超过千家，涉及国内多个省份客户。拥有多年网站建设开发经验。为企业提供专业的网站建设、创意设计、宣传推广等服务。 通过专业的设计、独特的风格，为不同客户提供各种风格的特色服务。
原文链接 ==>http://sylblog.xin/archives/57
在正式学习:target 之前，我们先来学习一下网页开发中的锚点。
下面是百度百科的介绍：
古代的锚是一块大石头，或是装满石头的篓筐，称为”碇“。碇石用绳系住沉入水底，依其重量使船停泊。后来有木爪石锚，即在石块两旁系上木爪，靠重量和抓力使船停泊。中国南朝已有关于金属锚的记载。中国古代帆船使用四爪铁锚，这种锚性能优良，在舢板和小船上仍有使用。
当你想乘船的时候，船在湖上飘着，无法登船，此时锚的作用就发挥出来了，只要拉一下绳子，船就过来了！！！
网页开发中的锚点：网页内设置的一个位置，点击链接可以跳转到指定位置
以掘金文章详情页为例,右边侧边栏有目录，当你点击其中的一个目录是不是会跳转到具体的内容。
有没有人好奇时如何实现的呢，没错就是锚点：通过 a 标签的 href 跳转到对应 id 的元素。
语法
语法
那么:target 跟这个有什么关系呢？？？往下看！！！
代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配 。
是不是有点难理解，其实也很简单，这里的:target 指的就是 h2，
heading-2:target{
}
语法
target 选择器用于选取当前活动的目标元素
可以根据 id，设置目标元素跳转后的式样。
#header:target{
color:red;
}
跳转
目标
开始的时候目标是黑色的，当你点击跳转按钮后，页面跳到目标，且目标变成红色！
:target{
color:red;
}
注意观察字体颜色的变化。
#nav {
padding: 0px;
position: fixed;
height: 100%;
top: 0;
left:0;
width: 100px;
background: #2ecc71;
}
打开
#nav:target {
left: 0;
transition: left 1s;
}
#nav:not(:target) {
left: -100%;
transition: left 1.5s;
}
效果：
完整代码：
tab切换其实有很多种实现方式，纯CSS，JS市面上的解决方案五花八门，既然介绍到了:target,自然就要用它来做了。
整体的解决方案是：:target + z-index
先简单的说下原理：
:target只对当前激活的目标元素生效，所以只有激活的元素拥有z-index属性。
1.创建tab选项
tab1
tab2
tab3
2. 创建内容
我是tab1
我是tab2
我是tab3
这里我们设置了div的高度与父元素保持一致，并且未知相对于父元素是固定的，所以只有第三个显示出来。
#tab-one:target,
#tab-two:target,
#tab-three:target {
z-index: 1;
}
效果：
简简单单的几行代码就可以实现tab的切换，我觉得很OK!,当然这个例子还有很多东西没有处理，比如选中后tab的样式等等，大家可以试着完善。
javascript操作CSS确实方便简洁，容易实现，但是随着CSS的不断完善，越来越多的功能可以用CSS实现，大家要跟紧CSS的脚步
