目标伪类选择器用来匹配文档(页面)的URI中某个标识符的目标元素。URI中的标识符通常会包含一个丼号,后面带有一个标识符名称,例如#contact:target就是用来匹配ID为contact的元素被URI选中时候的样式的,:target伪类选择器选取链接的目标元素,然后供定义样式。
目标伪类选择器语法如下:
选择器 | 功能描述 |
E:target | 选择匹配E的所有元素,且匹配元素被相关URL指向 |
目标伪类选择器是动态选择器,只有存在URL指向该匹配元素的时候,样式效果才会生效。
目标伪类选择器需要IE9以及以上,opera9.6以及以上,还有所有版本的chrome,FF,Safari都支持。
下面的程序通过目标伪类选择器实现手风琴效果:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>垂直手风琴</title>
<style type="text/css">
.accordionMenu {
background: #fff;
color:#424242;
font: 12px Arial, Verdana, sans-serif;
margin:0 auto;
padding: 10px;
width: 500px;
}
.accordionMenu h2 {
margin:5px 0;
padding:0;
position: relative;
}
.accordionMenu h2:before {
border: 5px solid #fff;
border-color: #fff transparent transparent;
content:"";
height: 0;
position:absolute;
right: 10px;
top: 15px;
width: 0;
}
.accordionMenu h2 a {
background: #8f8f8f;
background: -moz-linear-gradient( top, #cecece, #8f8f8f);
background: -webkit-gradient(linear, left top,