css除去最后一個(gè)元素樣式的方法

發(fā)布時(shí)間：2021-04-13 10:36:00 來(lái)源：億速云閱讀：655 作者：小新欄目：web開(kāi)發(fā)

小編給大家分享一下css除去最后一個(gè)元素樣式的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css除去最后一個(gè)元素樣式的方法：1、使用id或是類(lèi)選擇器給最后一個(gè)元素設(shè)置默認(rèn)樣式來(lái)去除效果；2、使用偽類(lèi)“:last-child”，自動(dòng)匹配最后一個(gè)元素，為其設(shè)置默認(rèn)樣式，語(yǔ)法“元素名稱(chēng):last-child{屬性:值}”。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

很多人可能都碰到這樣一個(gè)情況：

<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>

這樣就會(huì)出現(xiàn)三條右邊框，在實(shí)際運(yùn)用中最后條邊框是需要去掉的。

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

1、為最后個(gè)li添加個(gè)樣式

.b-none{border:none}

2、用css偽類(lèi):last-child，來(lái)自動(dòng)匹配最后個(gè)元素，并執(zhí)行相應(yīng)的樣式.

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

第二種偽類(lèi)方法在IE下有兼容問(wèn)題，如果不考慮兼容問(wèn)題的話(huà)，到是個(gè)好選擇。

以上是“css除去最后一個(gè)元素樣式的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

css除去最后一個(gè)元素樣式的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽