但是想要有交互特效，比如点击、拖曳、失焦、聚焦等特效都是需要结合js、jq来实现的。因此没办法做到点击a标签达到显示a内部其他dom内容。
不过css有个hover能实现鼠标移动到a标签上展示其下内容。比如最常见的鼠标经过展示下拉框，使用纯css就能达到，主要原因就是使用hover经过将下面的ul.submenu给显示出来
例如
<a href="#" id="a1">xxx
<ul style="display:none/*一开始是隐藏的，为了说明直接写在节点上*/">
<li><a href="#">111</a></li>
......
</ul>
</a>
css:
#a1:hover ul{ display:block/*鼠标经过将ul显示出来*/}
方法如下：
取消a标签在移动端点击时的蓝色：
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
-webkit-user-select: none
-moz-user-focus: none
-moz-user-select: none
使用图片作为a标签的点击按钮时，当触发touchstart的时候，往往会有一个灰色的背景：
a,a:hover,a:active,a:visited,a:link,a:focus{
-webkit-tap-highlight-color:rgba(0,0,0,0)
-webkit-tap-highlight-color: transparent
outline:none
background: none
text-decoration: none
}
改变选中内容的背景颜色：
::selection {
background: #FFF
color: #333
}
::-moz-selection {
background: #FFF
color: #333
}
::-webkit-selection {
background: #FFF
color: #333
}
去除ios input框点击时的灰色背景：
-webkit-tap-highlight-color:rgba(0,0,0,0)
首先在css文件中设置对应的a标签样式1，一般用类名，如：<a
href="#"
class="style1"
id
=“a”>a标签</a>
.style1
{
color:#000
}
同时准备样式2
.style2{
color:#fff
}
在脚本事件中为a绑定点击事件：var
a
=
document.getElementById("a")
a.onclick=
function
(){a.className
=
"style2"
}
