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

需求

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

在这里插入图片描述

现状

在这里插入图片描述

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

最后发现是因为每个格子都给了 margin-right：36px，影响到了最后一个格子
所以使用last-child 将最后一个格子的margin 属性去掉

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

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

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

未修改好的

在这里插入图片描述

  <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样式

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

修改后的代码

在这里插入图片描述

   <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 代码

.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下生成的最后一个标签的样式没有生效。