CSS样式中部分伪类选择器的应用

昨天要做一个手风琴效果的网页，不完整的那种，效果是这样的

效果是点击上方按钮时伸出下方的文本框，在点击另一个按钮时显示另一个文本框并收回原先的文本框，其中有滑出的动画过渡，在被选中的按钮上改变背景颜色，并且改变按钮右边的箭头图案。但是再次点击按钮时他不会自己收回去- -
首先我给里面的HTML结构的定位是这样的（以下省略HTML及其他标签）

<div class="box">
    <div class="menu" id="one">
        <h2><a href="#one">One</a></h2>
        <p>这是第一段内容</p>
    </div>
    <div class="menu" id="two">
        <h2><a href="#two">Two</a></h2>
        <p>这是第二段内容</p>
    </div>
    <div class="menu" id="thr">
        <h2><a href="#thr">Thr</a></h2>
        <p>这是第三段内容</p>
    </div>
</div>

添加style样式

*{
    margin:0;
    padding:0;
    text-decoration:none;
}
.box{
    width:500px;
    margin:0 auto;
}
.menu h2 a{
    display:inline-block;
    width:100%;
    height:40px;
    background:#CCC;
    border-radius:10px;
    box-sizing:border-box;
    padding-left:10px;
    line-height:40px;
}
.menu p{
    margin:10px;
}

现在的效果图是这样的

基本的效果出来了，剩下的就是添加伪类了。
首先，内容原本是不显示的，但是他在后面会滑出来。这个时候就用到调整p标签的高度再加上超出隐藏了。

.menu p{
    height:0;
    overflow:hidden;
    margin:10px;
}

更改了以后，由于p标签的高度为0，而且设置了overflow:hidden;超出的内容隐藏，所以p标签里面的内容现在是看不到了。

接着，就要让它通过点击按钮显示出来。
在点击按钮之前，鼠标移动到按钮上方，点击按钮时他也会变成浅蓝色，这时候就是运用到它的按钮（a标签）的:hover属性和:active属性了。

.menu h2 a:hover,.menu h2 a:active{
    background:#0084FF;
    color:#FFF;
}

我们已经给a标签设置了于每个div相对应的href属性，对应到每个div。现在就要使用到:target了。:target跟window.hash和标签的ID属性息息相关。通过a标签的href属性关联到每个相应的ID，再通过CSS中的:target把效果显现出来。

.box :target p{
    height:100px;
    overflow:auto;
}
.box :target h2 a,.menu h2 a:hover,.menu h2 a:active{
    background:#0084FF;
    color:#FFF;
}

上面的代码，当某个class类为.box的div标签里面的相应ID的标签被通过a标签点击:target时，被改变的标签的子标签中的p标签和h2标签中的a标签的样式发生改变。所以，a标签被选中并且:target时，鼠标移开a标签时颜色不会发生变化。

效果是出来了。改变p标签的高度和a标签的背景与文字的颜色。
下面变蓝色的是One在:target显示p标签内容时，鼠标移动到Thr时的:hover属性效果。下面是Thr被点击（没松开）时的:active效果，鼠标按着移开Thr后，Thr没有变色。
接着添加动画过渡效果transition属性。

.menu p{
    height:0;
    overflow:hidden;
    transition:all 1s ease-in-out;
    margin:10px;
}

我不会截动图，大概就这样吧。。。。

这是第一个One标签在:target时，点击Two时发生的效果。
基本效果都完成了，剩下就是右边的箭头了。
我在这里运用到的是:after，在标签后方添加内容。这里我用的是通过内边框和它的透明属性添加“箭头”，边框的透明属性是transparent，遵循上右下左的顺序排列。这里用到了定位，所以我还给a标签添加了相对定位属性。
首先我先制作一个箭头：

.menu h2 a{
    display:inline-block;
    width:100%;
    height:40px;
    background:#CCC;
    border-radius:10px;
    box-sizing:border-box;
    padding-left:10px;
    line-height:40px;
    position:relative;
}
.menu h2 a:after{
    content:"";
    display:block;
    width:0;
    height:0;
    border:5px solid #FFF;
    border-color:white transparent transparent transparent;
    position:absolute;
    top:20px;
    right:10px;
}

先把它的位置给调整好了，接着，再设置当a标签:target时的属性

.box :target h2 a:after{
    border-color:transparent transparent transparent white;
    top:18px;
    right:5px;
}

这里只要调整它的边框的方向和绝对位置的定位就可以了。

所有效果完成。
这就是一个简单的手风琴效果制作，当然所有的样式都不是固定的，可以根据每个人的不同自己修改。
ps:我昨晚在这里面纠结了一个空格纠结了四个小时都没变化……感觉身体被代码掏空……hhhh