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，以上是调试所得心得，如有错误，欢迎大家批评指正。