生活随笔
收集整理的这篇文章主要介绍了
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 的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔 网站内容还不错，欢迎将生活随笔 推荐给好友。
