【Vue】在Vue中的css常见问题，比如less，scoped，&的使用，伪类选择器的使用

项目场景：

提示：这里简述项目相关背景：

例如：在开发Vue页面时，会出现样式的编写，写样式就是在style标签里面，会出现一些问题。

我用的是这种

<style scoped lang="less">

---

问题描述

提示：这里描述项目中遇到的问题：

例如：我有一大串数据，用v-for循环渲染，我想对渲染的第一条数据改变颜色、加粗等操作。

这是渲染页面的代码，看截图里面
再看渲染结果↓

现在要对渲染的数据，它的第一条进行改颜色。

.item {
	display: flex;
	justify-content: space-between;
	font-size: 24px;
	margin-bottom: 30px;
	// &就是item本身，然后nth-of-type（1）就是第找到item的第一个
	&:nth-of-type(1) {
		// 颜色改为红色
		color: #cb2b2a;
		span {
			color: #cb2b2a;
			}
		}
	 //  不是第一条数据的都改为灰色
	 span {
		color: #999;
	}
	}

---

原因分析：

提示：这里填写问题的分析：

像这样的情况还有很多，例如
.
实现这种效果，间隔之间还有一个竖线，但是最后一个没有
这种下一期再说
scoped就是防止穿透，这样组件被调用的时候，父组件的样式不会影响到它，但是，也会出现影响的结果。重名的时候可能会。

---

解决方案：

提示：这里填写该问题的具体解决方案：

用&寻找它自己，再用伪类选择器，改样式