从CSS中动态分配CSS类

2023年2月5日 138次阅读

是否可以动态地将类分配给现有类？我正在尝试为第一个孩子分配一个样式,如下所示：

.active {
  color: red;
}

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  /* make it active class */
}

最佳答案 不,只是CSS这是不可能的.

你能做的最好：

.active,
item:first-child .item_text {
  color: red;
}

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
}

如果您使用了像LESS或SASS这样的CSS预处理器,这可能会扩展CSS,其功能包括包含/扩展类.

不到

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  .active;
}

这将直接用颜色替换该类名：红色;线.

在SASS中(从版本3开始,使用“SCSS”语法)：

item:first-child .item_text {
  background: rgba(255, 255, 255, 1);
  @extend .active;
}

这将呈现与上面我的CSS示例相同的输出.

点赞