IE浏览器Css选择的优先问题

　　今天，我要使用一个分页控件。发现，在Chrome下显示完全正常的控件，在IE下面显示得异常肥大。

在使用IE的“开发人员工具”的时候，发现我期待的CSS效果没有显示出来，相反是另外的一个CSS效果。这里贴上两端相关的CSS代码。

.pagination {
    
    border: none;
    border-radius: 3px;
    margin-left:30%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.gigantic.pagination {
    margin: 10px 0;
    margin-left:20%;

}

 

      <div class="pagination" style="width:auto;">
        <a href="#" class="first" data-action="first">&laquo;</a>
         <a href="#" class="previous"
            data-action="previous">&lsaquo;</a>
        <input  id="pageNum"  type="text" readonly="readonly" data-max-page="40" />
        <a href="#" class="next" data-action="next">&rsaquo;</a> 
        <a href="#" class="last"
            data-action="last">&raquo;</a>
    </div>

虽然我期望显示的是pagination里面的CSS效果。但是不知道为什么IE却显示.gigantic.pagination里面的CSS效果。无奈只好把两个CSS效果改成一样的，这样在IE和Chrome下面就显示正常了。但是这样没有根本地找出问题的症状。