Question

我正在以一种可以通过进行一些简单的CSS更改轻松替换多个元素的颜色的方式构建网站。但是，当我要处理的特定元素时，我遇到了知识不足的问题：

CSS ：

.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close {
background-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-bottom-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-left-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */
border-right-color: rgba(225, 30, 30, 1) !important; /* REPLACE THIS COLOUR */}

由于所有这些都使用相同的颜色，是否有更聪明的方式编写此颜色以将它们组合在一起，所以我只需要更换一次颜色？我尝试将逗号，空格，分号组合在一起，但似乎不起作用。

我必须用于单独的边框项目的原因是，这是为了覆盖定义该边框的现有CSS，而不仅仅是一个边框。

任何帮助将不胜感激。谢谢，蚂蚁。

Answer 1

使用CSS变量

:root {
  --main-color: rgba(225, 30, 30, 1);
}
.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_close {
background-color: var(--main-color) !important; 
border-bottom-color: var(--main-color) !important; 
border-left-color: var(--main-color) !important; 
border-right-color: var(--main-color) !important;
}

这里是参考文献https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

更智能的CSS颜色更改

1 个答案: