纯css实现点击切换样式

原理： 利用 a伪类选择器，focus。（获得焦点设置样式，失去焦点恢复样式）

注意： active 和 focus的区别，active是点击 a标签时（从鼠标按下开始 到鼠标抬起结束。）

        focus是获得焦点，与失去焦点时触发相应的样式

示例demo：

< style>

div {

width: 100 px;

height: 50 px;

border: 1 px solid #ccc;

text-align: center;

line-height: 50 px;

font-size: 14 px;

padding: 10 px;

box-sizing: border-box;

}

a {

display: block;

text-decoration: none;

background: pink;

width: 100 px;

height: 50 px;

}

a :focus h4{

color: green;

background: yellow;

}

a h4{

color: hotpink;

}

</ style>

< div>

< a href= "#">

< h4>你好</ h4>

</ a>

< a href= "#">

< h4>你好</ h4>

</ a>

< a href= "#">

< h4>你好</ h4>

</ a>

< a href= "#">

< h4>你好</ h4>

</ a>

< a href= "#">

< h4>你好</ h4>

</ a>

</ div>