我们在开发的时候,想要为最后一个元素设置一些特殊的操作,css默认为我们提供了:last-child选择器,但是在实际使用中,要特别需要注意一个点。
:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
为本文写了个demo来说明:last-child选择器不起作用的原因。
html代部分:
<template>
<el-card shadow="never">
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</el-card>
</template>
css部分:
<style lang="scss" scoped>
p:last-child{
background: pink;
}
</style>
效果图片:
现在我们在其中的p标签里面定义类名,让类名的最后一个加背景颜色
<template>
<el-card shadow="never">
<p>第一个段落。</p>
<p class="box">第二个段落。</p>
<p class="box">第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
</el-card>
</template>
css部分:
<style lang="scss" scoped>
.box:last-child {
background: pink;
}
</style>
效果图:
现在问题来了,我们想要的效果没有实现,打开chrome的控制台看了一下,代码没执行,去网上查了一下,原来是这些p标签没有形成闭合区间
附: