巧用css去除第一個元素或最后個元素的樣式

很多人可能都碰到這樣一個情況：

<style>
    .test li{
       float:left;
       border-right:1px solid #ccc;
　　    width:100px;
　  　  height:100px;　　　　
}
</stly>

<ul class="test">
    <li></li>
    <li></li>
    <li></li>
</ul>

這樣就會出現三條右邊框，在實際運用中最后條邊框是需要去掉的。

這里為大家介紹兩種方法：

　　1、為最后個li添加個樣式，比如

.b-none{border:none}

　　2、用css偽類:last-child，來自動匹配最后個元素，並執行相應的樣式.

.test li:last-child{border:none}

第二種偽類方法在IE下有兼容問題，如果不考慮兼容問題的話，到是個好選擇。