Html 为相同的css代码添加组

我有很多相同的css代码应用于不同的html元素

e、 下面的代码大约写了100次

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

是否可以创建一个类，然后将这个类添加到html元素中，这样每次只能创建一行，而不是5行

逗号分隔不可能有太多的元素

我搜索了谷歌，但没有找到任何符合我问题的东西

---

谢谢你的回答：）

我要发布的第一个选项已经发布，并且由于某种原因被删除。不知道为什么，这是完全正确的

可以创建一个类以应用于所有受影响的图元：

.flex{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}

或者可以使用CSS预处理器，如。你可以用更少的钱用两种方法来做。首先：

.flex{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.选择器-1{
&：扩展（.flex）；
/*自定义样式在这里*/
}
.选择器-2{
&：扩展（.flex）；
/*自定义样式在这里*/
}
.选择器-3{
&：扩展（.flex）；
/*自定义样式在这里*/
}

上述产出：

.flex，
.选择器-1，
.选择器-2，
.选择器-3{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.选择器-1{
/*自定义样式在这里*/
}
.选择器-2{
/*自定义样式在这里*/
}
.选择器-3{
/*自定义样式在这里*/
}

或者您可以使用：

.flex（）{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
}
.选择器-1{
弯曲
/*自定义样式在这里*/
}
.选择器-2{
弯曲
/*自定义样式在这里*/
}
.选择器-3{
弯曲
/*自定义样式在这里*/
}

上述产出：

.selector-1{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
/*自定义样式在这里*/
}
.选择器-2{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
/*自定义样式在这里*/
}
.选择器-3{
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
显示器：flex；
/*自定义样式在这里*/
}

嗯，这就是LESS和SASS所做的（许多事情之一）。您可能想看看预处理语言，比如SCSS/LESS。你要找的是混音器。你用的是什么选择器？不是类？SCSS看起来是一个不错的解决方案，thx:）