当前位置: 萬仟网 > IT编程>网页制作>CSS > css中:last-child不生效的解决方法

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

2022年07月29日 CSS 我要评论
在产品需求中,总有对第一个或者最后一个同类元素进行特殊的样式处理。如果使用js来判断哪个是第一个、最后一个也并不是不可以。但是,完全属于css的管理范围为什么要去使用js呢?css选择器出场!下面仅展

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

如果使用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>

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

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 :last-child不生效内容请搜索萬仟网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持萬仟网!

(1)
打赏 微信扫一扫 微信扫一扫

相关文章:

  • 浅谈为什么我的 z-index 又不生效了

    表面看起来,z-index 似乎是一个很简单的属性,你给它设置哪个值,元素就会位于 z 轴的哪个位置。但它实际上并没有我们想象的这么简单,这个属性背后是一系列决定元素所在层级的规则…

    2022年07月14日 网页制作
  • 纯CSS实现一个简单步骤条的示例代码

    前言html中的input是一个十分强大的标签,配合上css,在一定程度上基本可以代替部分js控制。最近在搞一个步骤条,于是乎,想着使用css给做出来,本文记叙实现的基本思路。效果…

    2022年07月13日 网页制作
  • CSS中使用grid布局实现一套模板多种布局

    CSS中使用grid布局实现一套模板多种布局

    如上图,在日常开发中我们可能会遇到对页面进行不同布局配置的需求,实现方法也有很多,例如:1.写多个页面,不同布局拥有不同的页面模板与样式代码,这种方法看起来是最... [阅读全文]
  • CSS实现背景图片全屏铺满自适应的3种方式

    CSS实现背景图片全屏铺满自适应的3种方式

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而... [阅读全文]
  • Javascript的独特的概念之闭包

    Javascript的独特的概念之闭包

    javascript闭包简介:javascript语言中,有一个独特的概念:闭包(closure),这在类似c++,java等编程语言中没有这个概念。很多高级应... [阅读全文]
  • CSS 实现角标效果的完整代码

    最近在项目中碰到一个这样的角标设计,如下像这种可以文字可变化,自适应大小的布局,自然首选 css 了~下面看看如何实现的(两分钟读完)一、圆角矩形和三角形从设计上可以拆分成两部分,…

    2022年06月28日 网页制作

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。

发表评论

验证码:
Copyright © 2017-2022  萬仟网 保留所有权利. 琼ICP备2022007597号