1.期望效果

代码展示:

<template><div class="root-container"><div class="father"><div class="child" v-for="item in 10" :key="item">一共10个元素，我是第{{item}}个<template v-if="item== 10">（css控制我的颜色）</template></div></div></div>
</template>
<style lang='scss' scoped>
.father {width: 500px;border: 1px solid #b2b6b6;text-align: center;.child {padding: 10px 0;&:last-child {color: red;}}
}
</style>

展示的效果也和期望中的一样，最后一个元素文字为红色

2. 非期望效果

但有时候:last-child实现的却和想象中的 不太一样！！！！
代码如下：

<template><div class="root-container"><div class="father"><div class="child" v-for="item in 10" :key="item">一共10个元素，我是第{{item}}个<template v-if="item== 10">（css控制我的颜色）</template></div><p>我是多余的元素</p></div></div>
</template>
<style lang='scss' scoped>
.father {width: 500px;border: 1px solid #b2b6b6;text-align: center;.child {padding: 10px 0;&:last-child {color: red;}}
}
</style>

看代码也可以看出来，仅仅是多了一个p标签，明明把:last-child是设置给了.child，但是需要的效果却没有了。

3. 分析问题

为什么:last-child没有起作用？

3.1 el:last-child 的匹配规则

1.查找 el 选择器匹配元素的所有同级元素（siblings）
2.在同级元素中查找最后一个元素
3.检验最后一个元素是否与选择器 el 匹配

期望中的效果实现了，是因为el:last-child匹配到的最后一个元素也是.child。
非期望效果出现，是因为el:last-child匹配到的最后一个元素也是p标签而不是.child。

4. 解决办法

方法1、
让:last-child在其父元素内没有其它的标签，即让其父元素仅包含该种类型标签

方法2、
使用其它标签选择器:last-of-type
具体使用规则 :last-of-type — MDN

css -- 为什么:last-child 无效?相关推荐

css样式属性值无效问题
我出现的问题是单位写错导致css样式属性值无效,如图所示,倾斜度单位是deg而不是dep,原因:对此单位不熟悉: 经过看其他人文章发现还有可能出现以下问题: 1.css写属性值,一个标签的中括号后面加 ...
前端开发审查元素时CSS样式有个横线（该CSS样式定义后无效）的解决办法
问题概述关于这个问题,博主是在前端开发,样式调试的时候遇到的, 进行盒模型,CSS Debugger调试时,遇到样式设值后不可用的情况! 如下图: 解决办法左看右看,上看下看,最终发现是前面在编码 ...
html怎么防止左边溢出,css防止溢出 css+div 溢出隐藏无效
div+css 为什么div内的div总会溢出,怎么解决明明设定的宽度是一样的,为什么会里面的div会出来呢,CSS布局HTML小编今天和大家分享解决办法除了宽以外你还设置了什么? 你把宽度设置好 ...
html中隐藏溢出怎么写,html溢出隐藏代码 css+div 溢出隐藏无效
css+div 溢出隐藏无效隐藏图片超出div部分代码如何写的? 把图片作为div的背景图片是最容易实现你所要的效果的方式: 如果一定要用img标签那就要css和js结合才能实现了: 请html代 ...
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
[写在前面]vue3在vscode运行正常.build后在IDEA运行正常,但是当部署在服务器上运行发现样式加载不出来,下面我们针对这些情况进行复现与解决. 一.问题分析困扰我好久,当即百度原因,百 ...
css表格宽度设置无效
table-layout: fixed table-layout: fixed,table和td设置宽度有效,但在第一行有合并列的情况时,列宽会被均分,从而导致td设置宽度无效(table宽度仍然有效 ...
css 文字溢出隐藏 css 文字溢出隐藏无效解决办法
作为一个码农,css技术有时候网上cv来的更方便一些,溢出隐藏显示...,网上百度了两个小时,居然没一个正确的??现在网上都怎么了,我表示很服气,而且他们是一模一样的代码,请这些人都确定了正确性在发出 ...
在CSS布局中max-width 无效的解决方法
max-width 无效的解决方法: width:100% 和 max-width:100%的区别: width: 100%是将所有指定元素的宽度拉伸或收缩到和父元素的宽度一致, 而max-widt ...
CSS文字超出省略号无效
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 在使用上面三条属性时,文字并没有出现省略号,使用display: blo ...
解决animate.css在谷歌浏览器下无效，动画没了的问题

css -- 为什么:last-child 无效?