CSS3目标伪类选择器--实现简单手风琴效果

总结自：图解CSS3中的实战体验
以前制作手风琴效果需要依赖js脚本，功能强大的CSS3的目标伪选择器可以直接实现同样的效果。
通过目标伪类选择器“E:target”，显示和隐藏不同栏目内容：
先上一幅效果图：

全部代码如下:

 

	
Brand
	
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa



	
promotiond
	
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb



 
	
event
	
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
ccccccccccccccccccccccccc

其中（摘自网络）：
一、
:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：

#example:before {
content: “#”;
color: red;
}

#example:after {
content: "KaTeX parse error: Expected 'EOF', got '}' at position 20: … color: red; }̲ 这段代码会在#example…’，插入的行内元素是作为#example的子元素，效果如下:

Here is the example content

需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，同时正如前面所说，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。

#example:before {
content: “”;
display: block;
width: 100px;
height: 100px;
}
伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

除了插入文字内容，还可以指定其他内容：

p:before {
content: url(‘img.jpg’);
}
a:after {
content: attr(href);
}
attr()函数会返回指定元素对应属性的值

二、CSS3 transition 属性：
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

默认值： all 0 ease 0
继承性： no
版本： CSS3
JavaScript 语法： object.style.transition=“width 2s”

语法
transition: property duration timing-function delay;

值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

transition 提供一种运动渐变的效果：
下面这个是一个演示实例：

请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。

注释：本例在 Internet Explorer 中无效。

三、目标伪类应用场景：

其中几项效果使用js效果会更好，因为纯CSS可能存在潜在的易用性和可用性问题。