:first-child以及:last-child易错点
2017-07-25 本文已影响212人
回调的幸福时光
前言
对选择器理解的不够深入，今天说说以下几个选择器：
:first-child,:last-child,:first-of-type,:last-of-type。比较常见的场景是，最后一行去掉下划线。
定义
:first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
:last-child 选择器匹配属于其父元素的最后一个子元素。
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素。
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素。
注意，很重要的一点，父元素。
虽然body也可以作为父元素，但是实际开发中html结构是很复杂的，所以建议书写清晰的结构。
:last-child和:last-of-type的区别
E:last-child要求，E元素必须是父元素的最后一个元素。(位置顺序)
情况一 VS 情况三
E:last-of-type，E元素不一定是父元素的最后一个元素，可能是倒数第二个，或者其他。(类型)
情况二 VS 情况五
E:last-of-type, 当class和tag冲突时，class无效
情况四 VS 情况五
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:first-child伪类</title>
<style>
.first {
border-bottom: 1px solid #eee;
}
.first:last-child {
border-bottom: 0;
}
.two {
border-bottom: 1px solid #eee;
}
.two:last-of-type {
border-bottom: 0;
}
</style>
</head>
<body>
<div>
<h3>情况一</h3>
<p class="first">我是樱桃子</p>
<p class="first">我是花轮</p>
<p class="first">我是安德烈</p>
<p>我是来捣乱的</p>
</div>
<div>
<h3>情况二</h3>
<p class="first">我是樱桃子</p>
<p class="first">我是花轮</p>
<p class="first">我是安德烈</p>
<div>我是来捣乱的</div>
</div>
<div>
<h3>情况三</h3>
<p class="first">我是樱桃子</p>
<p class="first">我是花轮</p>
<p>我是安德烈</p>
<p class="first">我是来捣乱的</p>
</div>
<div>
<h3>情况四</h3>
<p class="two">我是樱桃子</p>
<p class="two">我是花轮</p>
<p class="two">我是安德烈</p>
<p>我是来捣乱的</p>
</div>
<div>
<h3>情况五</h3>
<p class="two">我是樱桃子</p>
<p class="two">我是花轮</p>
<p class="two">我是安德烈</p>
<div>我是来捣乱的</div>
</div>
</body>
</html>
