解决css样式中last-child不生效的问题

需求

项目中需要使用v-for指令来渲染一个图片列表,

现状

发现,最后一个格子并没有跟下面绿色线对齐。

最后发现 是因为 每个格子都给了 margin-right:36px,影响到了最后一个格子

所以使用last-child 将最后一个格子的margin 属性去掉

首先我们得明白first-child和last-child是干什么用的:

复制代码
    first-child选择器用于选取属于其父元素的第一个子元素的指定选择器。
    last-child选择器用于选取属于其父元素的最后一个子元素的指定选择器。

我们需要注意,使用:first-child伪类时要保证前面没有兄弟元素节点,使用 :last-child 伪类时要保证后面没有兄弟元素节点。

未修改好的


html 复制代码
  <div v-for="(item, index) in exportData.slice(3, 8)" :key="index">
      <div class="murightPart devicePart rectImg defaultrectImg">
        <div class="deviceTitle">{{ item.name.slice(0, 2) }}</div>
           <div class="deviceTitle">{{ item.name.slice(2, 5) }}</div>
       </div>
     </div>
 </div>

项目中的CSS样式

css 复制代码
 .muPart {
    display: flex;
  }

  .murightPart {
    margin-right: 36px;
  }
    .murightPart :last-child{
    margin-right: 0px;
  }

修改后的代码

html 复制代码
   <div class="muPart">
            <div v-for="(item, index) in  exportData.slice(3, 8) "
             :key="index" 
             class="murightPart">
              <div class="devicePart rectImg greenRect">
                <div class="deviceTitle">{{ item.name.slice(0, 2) }}</div>
                <div class="deviceTitle">{{ item.name.slice(2, 5) }}</div>
              </div>
            </div>
          </div>

css 代码

css 复制代码
.muPart {
    display: flex;
  }

  .murightPart {
    margin-right: 36px;
  }
  .murightPart:last-child {
    margin-right: 0px;
  }

原因是,

从图上代码来看,
murightPart 样式类下设置了last-child,同时我们必须知道:last-child指的是父元素下的最后一个子元素 ,要实现last-child下的样式生效的话需要保证class为muPart 下的div标签没有兄弟标签,或者创建一个单独的div标签把需要last-child生效的标签包裹起来,同时first-child选择器也是同理。

从修改好的与未修改好的HTML做对比,修改好的HTML是class为muPart下的div标签就一个,靠着div里面的v-for来生成其他的元素,而未修改好的HTML下面除了包含着v-for的标签,还有一个其他的兄弟标签,渲染页面后把last-child下的元素给这个兄弟标签了,所有v-for下生成的最后一个标签的样式没有生效。

同时也可以考虑使用下first-of-type和last-of-type,

first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。

last-child 和 last-of-type 原理类似

相关推荐
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
嘉琪0015 小时前
封装一个有最小化的dialog组件
前端·javascript·css
春秋半夏8 小时前
音乐播放、歌词滚动
前端·css
饮茶三千9 小时前
几个在开发中起大作用的CSS新特性!
前端·css
十盒半价12 小时前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
Savior`L16 小时前
CSS知识复习5
前端·css
Liudef0620 小时前
儿童趣味记忆配对游戏
css·游戏·css3