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，以上是調試所得心得，若有錯誤，歡迎你們批評指正。