CSS3学习笔记——伪类hover

最近看到一篇文章：“Transition、Transform和Animation使用简介及应用展示” ，想看看里面 “不同缓动类效果demo” 例子的效果，发现了一个问题如下：

.Trans_Box :hover （冒号前空格）这个伪类只能作用于 .trans_box中的子元素，鼠标移到自身时只能激发其子元素的样式发生改变。

　　　　　　　　　　（冒号前无空格）表示Trans_Box自身样式发生改变。

<!--Html部分代码-->
<div id="hhh" class="Trans_Box">
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box easein">ease-in</div>
<div class="box easeout">ease-out</div>
<div class="box easeinout">ease-in-out</div>
</div>

/*CSS代码*/
.Trans_Box {
background:#CCC;
}
.box {
background:#09C;
border:black 1px solid;
font-size:150%;
width:100px;
height:100px;
margin:10px 0;
text-align:center;
}
.linear {
transition: all 4s linear;
-webkit-transition: all 4s linear;
-moz-transition: all 4s linear;
}
.ease {
transition:all 4s ease;
-webkit-transition:all 4s ease;
}
.easein {
transition:all 4s ease-in;
-webkit-transition:all 4s ease-in;
}
.easeout {
transition:all 4s ease-out;
-webkit-transition:all 4s ease-out;
}
.easeinout {
transition:all 4s ease-in-out;
-webkit-transition:all 4s ease-in-out;
}
.Trans_Box :hover {     //表示鼠标hover每个.box时，样式发生改变   //.Trans_Box:hover .box 表示鼠标hover Trans_Box时，每个box的样式发生改变，因此使用后一种方式定义才能达到连接中的效果
margin-left:89%;
background-color:#0CF;
border-radius:25px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
}

刚刚学习CSS3，以上是调试所得心得，如有错误，欢迎大家批评指正。