外贸服装网站模板,国内企业网站设计,工业互联网平台首先要提高数据的挖掘能力,做装修效果图的网站有哪些软件需求
项目中需要使用v-for指令来渲染一个图片列表#xff0c; 现状 发现#xff0c;最后一个格子并没有跟下面绿色线对齐。
最后发现 是因为 每个格子都给了 margin-right#xff1a;36px#xff0c;影响到了最后一个格子 所以使用last-child 将最后一个格子的margin 属性…需求
项目中需要使用v-for指令来渲染一个图片列表 现状 发现最后一个格子并没有跟下面绿色线对齐。
最后发现 是因为 每个格子都给了 margin-right36px影响到了最后一个格子 所以使用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) :keyindexdiv classmurightPart devicePart rectImg defaultrectImgdiv classdeviceTitle{{ item.name.slice(0, 2) }}/divdiv classdeviceTitle{{ item.name.slice(2, 5) }}/div/div/div/div项目中的CSS样式 .muPart {display: flex;}.murightPart {margin-right: 36px;}.murightPart :last-child{margin-right: 0px;}修改后的代码 div classmuPartdiv v-for(item, index) in exportData.slice(3, 8) :keyindex classmurightPartdiv classdevicePart rectImg greenRectdiv classdeviceTitle{{ item.name.slice(0, 2) }}/divdiv classdeviceTitle{{ item.name.slice(2, 5) }}/div/div/div/divcss 代码
.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 原理类似
