定义
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
提示：p:last-child 等同于 p:nth-first-child(1)。
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
提示：p:last-child 等同于 p:nth-last-child(1)。
直接看定义稍微有点绕，定义中最关键的就是属于其父元素。如果不能理解的话我们通过几个经典的例子来让大家豁然开朗。
实例
first-child和last-child基本相同，我们通过看:last-child一并学习吧
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css.css"/><style>button:last-child{width: 40px;height: 40px;background-color: aqua;}</style></head><body><div class='level-1'><button>我的父级是level-1</button><div class="level-2-1"><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button></div><div class="level-2-2"><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button><button>我的父级是level-2-1</button></div><button>我的父级是level-1</button></div></body><script src="js/require.js" data-main="main" type="text/javascript"></script></html>
通过上面的例子我们很容易看出来last之间的关系，看似明白了那我们接下来继续看
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css.css"/><style>button:last-child{min-width: 40px;min-height: 40px;background-color: aqua;border-radius: 10px;}</style></head><body><div class='level-1'><button>我的父级是level-1</button><div class="level-2-1"><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn-last</button><span>level-2-1-p-last</span></div><div class="level-2-2"><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn-last</button><div class="level-2-2-1"><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1-last</button></div></div><button>level-1-btn-last</button><p>level-1-p-last</p></div></body><script src="js/require.js" data-main="main" type="text/javascript"></script></html>
是不是有点疑问，为什么只有一个btn生效。我们用button做详解，其他的都同理
button:last-child寻找select的父级元素，直到查到body；根据父级元素查找其最后一个子元素A；对比该子元素A和button是否为同一类型，如果是则生效，否则不生效；
如果能看懂最后一个例子，那么对于last-child就出师了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css.css"/><style>:last-child{min-width: 40px;min-height: 40px;border:3px dashed rebeccapurple;border-radius: 10px;color: #f5293e;}</style></head><body><div class='level-1'><button>我的父级是level-1</button><div class="level-2-1"><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn</button><button>level-2-1-btn-last</button><span>level-2-1-p-last</span></div><div class="level-2-2"><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn</button><button>level-2-2-btn-last</button><div class="level-2-2-1"><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1</button><button>level-2-2-1-last</button></div></div><button>level-1-btn-last</button><p>level-1-p-last</p></div></body><script src="js/require.js" data-main="main" type="text/javascript"></script></html>
