css中:last-child不生效的解决方法


Posted in HTML / CSS onAugust 05, 2022

在产品需求中,总有对第一个或者最后一个同类元素进行特殊的样式处理。

如果使用js来判断哪个是第一个、最后一个也并不是不可以。
但是,完全属于css的管理范围为什么要去使用js呢?

css选择器出场!

下面仅展示:last-child效果

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>

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

css中:last-child不生效的解决方法

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,但是需要的效果却没有了。

css中:last-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中:last-child不生效的解决方法的文章就介绍到这了,更多相关css :last-child不生效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
CSS浮动引起的高度塌陷问题
Aug 05 #HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 #HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 #HTML / CSS
纯CSS打字动画的实现示例
Aug 05 #HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
前端使用svg图片改色实现示例
Jul 23 #HTML / CSS
详解flex:1什么意思
Jul 23 #HTML / CSS
You might like
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
PHP 读取和编写 XML
2014/11/19 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python open读写文件实现脚本
2008/09/06 Python
Python中文竖排显示的方法
2015/07/28 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
电脑饰品店的创业计划书
2014/01/21 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android