css 字符串相加 |css中书写顺序

/* 定义两个变量 */
:root {
--text-1: 'CSS';
--text-2: '字符串相加';
}
/* 字符串相加操作 */
p {
/* 加号连接两个字符串 */
content: var(--text-1) + ' ' + var(--text-2);
}

在这个例子中，大家定义了两个变量并把它们的值设置为单引号包括的文本字符串。大家使用:root选择器来定义这些变量，这意味着大家可以在这个文件中的任何地方使用它们。

在p选择器的样式中，大家使用content属性并对两个字符串变量进行相加操作，将它们之间加上空格。最终，这将显示为“CSS 字符串相加”。

/* 输出结果 */
CSS 字符串相加

此外，可以在CSS中使用字符串相加操作来动态地生成类名或属性名。例如，大家可以使用字符串相加操作动态生成带有数字的类名。

/* 动态生成带有数字的类名 */
.button-1 {
background-color: red;
}
.button-2 {
background-color: blue;
}
:root {
--num: 1;
}
/* 通过变量改变数字，动态生成类名 */
.button-1:nth-child(var(--num)) {
background-color: green;
}

在这个例子中，大家定义了两个类名“button-1”和“button-2”，在:root选择器中定义了一个变量“num”，然后通过使用nth-child伪类选择器和CSS字符串相加操作，动态地生成带有数字的类名“button-1-n”。最终，这将显示为绿色的背景颜色。