从CSS中动态分配CSS类

Question

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

.active {
  color: red;
}

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

Answer 1

不，只有CSS才能实现这一点。

你能做的最好：

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

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

---

如果您使用了像LESS或SASS这样的CSS预处理器，其中包括扩展CSS等功能，可以扩展CSS。

没用

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

这将使用color: red;行替换该类名。

在SASS中（从版本3开始，使用“SCSS”语法）：

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

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