CSS3选择器（:target）简介

:target

“ tar ”，什么意思我也不清楚，大概是元素/标签之类的吧

“ get ”，获取

连起来就是“ 获取元素 ” ？

这个选择器实际上和hover很像很像，可以参考hover的效果来理解

hover的效果是给元素设置一些额外的属性，当（鼠标在元素内部）的条件满足时，代码激活，条件不满足时，代码不起作用

现在看target

target的效果是给元素设置额外的属性，当（元素被a链接访问到）这一条件满足是，代码激活。

 

现在接着扯a链接，a链接有个href属性，href属性可以在网址后面追加一个“ #name ”或者 “ #id ”的形式来设置页面打开的时候打开到页面的哪个位置（如果页面里面的元素设置过name或者id的话）。

  1. <a href='#nav'>百度</a>

当页面的某些元素设置了id属性，并且通过href='#id'的形式被访问到的话，这个元素就会处于（元素被a链接访问到）的状态,这个状态下元素会获取到页面的焦点

  1. <div id='nav'></div>
 

 当上面的a连接点击后，下面的这个div就会处于（元素被a链接访问到）状态并且获取到焦点

 我们来玩一个好玩点的小东西

  1. <body>
  2. <a href="#a1" id='a20'>div1</a>
  3. <a href="#a2" id='a1'>div2</a>
  4. <a href="#a3" id='a2'>div3</a>
  5. <a href="#a4" id='a3'>div4</a>
  6. <a href="#a5" id='a4'>div5</a>
  7. <a href="#a6" id='a5'>div6</a>
  8. <a href="#a7" id='a6'>div7</a>
  9. <a href="#a8" id='a7'>div8</a>
  10. <a href="#a9" id='a8'>div9</a>
  11. <a href="#a10" id='a9'>div10</a>
  12. <a href="#a11" id='a10'>div11</a>
  13. <a href="#a12" id='a11'>div12</a>
  14. <a href="#a13" id='a12'>div13</a>
  15. <a href="#a14" id='a13'>div14</a>
  16. <a href="#a15" id='a14'>div15</a>
  17. <a href="#a16" id='a15'>div16</a>
  18. <a href="#a17" id='a16'>div17</a>
  19. <a href="#a18" id='a17'>div18</a>
  20. <a href="#a19" id='a18'>div19</a>
  21. <a href="#a20" id='a19'>div20</a>
  22. </body>
 

这是一段html代码，有20个a链接，并且上一个链接的目标地址是下一个a连接（也就是点击1会跳到2上面，点2跳到3）

我们设置一些样式

  1. a{
  2. margin:100px 10px;
  3. color:#fff;
  4. font:14px/20px '微软雅黑';
  5. display:block;
  6. height:20px;
  7. width:30px;
  8. transition:0.3s;
  9. background:#000;
  10. float:left; outline:none;
  11. } 
 

a元素会变成一排黑色小块，并且设置了简单动画属性（样式变化时，用0.3秒完成去完成这个变化）

然后设置:target

  1. a:target{
  2. transition:0s;
  3. background:red;
  4. height:100px;
  5. }
 

元素被a链接访问到时，背景变成红色，并且变成100px的高度，并且这个变化是瞬间完成的

（提示，点一下a连接，按住回车不放）

原文链接：http://www.gbtags.com/gb/share/5574.htm

posted on 2015-06-23 17:23  shirleyqin216  阅读(190)  评论(0)    收藏  举报