您的位置：首页 > Web前端 > CSS

:last-child与:last-of-type你只是会用，有研究过区别吗？

2017-06-19 14:58 316 查看

:last-child与:last-of-type

同学们遇到过给同一组元素的最后一个元素设置css失效的情况吗？我遇到过，当时使用:last-child居然不起作用，看到名字不科学啊，明明是“最后一个元素”，那为什么设置CSS失效呢？今天来一探究竟吧

先看一组

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

不正常工作的代码

<!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前面的元素类型一致的最后一个元素

做个验证

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

![效果图3](https://github.com/FantasticLBP/web/blob/master/assets/屏幕快照%202017-06-17%20下午5.25.01.png?raw=true "效果图3")

* :nth-last-child不能正常工作的代码

:last-child、:last-of-type

![效果图2](https://github.com/FantasticLBP/web/blob/master/assets/屏幕快照%202017-06-17%20下午4.57.23.png?raw=true "效果图2")

* 接下来:nth-last-of-type闪亮登场

:last-child、:last-of-type

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css web前端 css坑 ios全栈开发之路

相关文章推荐

新的分享

章节导航