生活随笔
收集整理的這篇文章主要介紹了
last-child 与 last-of-type
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
同學們遇到過給同一組元素的最后一個元素設置css失效的情況嗎？我遇到過，當時使用:last-child居然不起作用，看到名字不科學啊，明明是“最后一個元素”，那為什么設置CSS失效呢？今天來一探究竟吧
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>:last-child、:last-of-type</title><script src="../../lib/jquery-2.1.0.js"></script><style>ul {margin: 100px 0;}li {list-style: circle;border-bottom: 1px solid #000000;}li:last-child {border-color: red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><!--<p>我是來騷擾的</p>--></ul></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>:last-child、:last-of-type</title><script src="../../lib/jquery-2.1.0.js"></script><style>ul {margin: 100px 0;}li {list-style: circle;border-bottom: 1px solid #000000;}li:last-child {border-color: red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><p>我是來騷擾的</p></ul></body>
</html>
問題拋出來了，那么來研究下:last-child和:last-of-type究竟是何方神圣。
:last-child：The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child這個css偽類代表的一組兄弟元素當中最后一個元素）但經過代碼發現，它說的一組元素應該是指其父元素的所有子元素且類型為:last-child前面指定的類型的一組元素。
:last-of-type：The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.（ :last-of-type這個css偽類代表其類型的一組兄弟元素中的最后一個元素**）所以它指的是和**:last-of-type前面的元素類型一致的一組元素的最后一個元素
同理：:nth-last-child和:nth-last-of-type的區別在于父元素的子元素中且與:nth-last-child前面的元素類型一致的最后一個元素
做個驗證
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>:last-child、:last-of-type</title><script src="../../lib/jquery-2.1.0.js"></script><style>ul {margin: 100px 0;}li {list-style: circle;border-bottom: 1px solid #000000;}li:nth-last-child(1){border-color: red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><!--<p>我是來騷擾的</p>--></ul></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>:last-child、:last-of-type</title><script src="../../lib/jquery-2.1.0.js"></script><style>ul {margin: 100px 0;}li {list-style: circle;border-bottom: 1px solid #000000;}li:nth-last-child(1){border-color: red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><p>我是來騷擾的</p></ul></body></html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>:last-child、:last-of-type</title><script src="../../lib/jquery-2.1.0.js"></script><style>ul {margin: 100px 0;}li {list-style: circle;border-bottom: 1px solid #000000;}li:nth-last-of-type(1){border-color: red;}</style></head><body><ul><li>1</li><li>2</li><li>3</li><p>我是來騷擾的</p></ul></body>
</html>
總結
以上是生活随笔 為你收集整理的last-child 与 last-of-type 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
