mirror of
https://github.com/NohamR/knowledge-kit.git
synced 2026-05-25 12:27:15 +00:00
196 lines
5.3 KiB
Markdown
196 lines
5.3 KiB
Markdown
# 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究竟是何方神圣。
|
||
|
||
1. :last-child：**The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child这个css伪类代表的一组兄弟元素当中最后一个元素）但经过代码发现，它说的一组元素应该是指其父元素的所有子元素且类型为:last-child前面指定的类型的一组元素。**
|
||
|
||
2. :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>
|
||
|
||
```
|
||
|
||
|
||
|
||
|
||
* :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>
|
||
```
|
||
|
||
|
||
|
||
* 接下来:nth-last-of-type闪亮登场
|
||
|
||
```
|
||
<!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>
|
||
```
|
||
|
||
 |