Vue.js中v-for渲染元素后如何使用first-child和last-child？

你当前的CSS选择器逻辑错误：
#grid .elements > *:first-child、#grid .elements > *:last-child的匹配规则是，找到所有.elements类的元素，再选中它们各自内部的第一个和最后一个直接子元素，完全不符合你想要的「选中网格容器内第一个、最后一个NewsCard卡片」的需求。

把CSS里的选择器去掉> *即可，直接匹配作为#grid子元素的第一个、最后一个.elements元素本身：

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap : 1rem;
}
#grid .elements:first-child,
#grid .elements:last-child {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
        grid-column: 1 / span 2;
        align-items: center;
}

• 如果你的#grid容器内除了v-for渲染的.elements元素外，还有其他同级的DOM元素（比如注释、隐藏的占位节点、其他自定义组件），可以把选择器换成#grid .elements:first-of-type、#grid .elements:last-of-type规避匹配错误
• 确保你的NewsCard组件根节点只有一个外层标签，否则类名绑定可能不生效，选择器也会匹配不到目标元素

内容的提问来源于stack exchange，提问作者rheina tamara