如何将现有CSS类应用于从CSS文件生成的HTML id/类

我想在CSS文件中保留我的所有样式。我不想重写现有的CSS，我想重用现有的类

我有一个标准的CSS类，比如：

.greenArea{
    background-color:#4CAF50;
    color:#ffffff;
}

我生成了一些按钮，我想应用这个类，但我不想从JS开始，我想在CSS中完成，所以所有样式都在一个地方

let btn = document.createElement("button")
btn.name = "start_btn"

是否有CSS语法将CSS类应用于某些HTML对象？

像这样（虚构的代码结构）：

---

您可以像这样处理它：

let btn = document.createElement("button")
btn.name = "start_btn"
btn.className = "greenArea";

这将创建以下元素：

<button name="start_btn" class="greenArea"></button>

---

在CSS中无法做到这一点，因为CSS不会更改元素属性，但您也可以使用

悬停、活动、聚焦

。。。。。检测案例中的元素，并对案例应用一些代码。

---

您可以使用SASS占位符选择器执行此操作。在他们解释的文件中

//Html
我充满活力地创造
我也创造了活力
哇，我是黄色的
//Scss
%绿地{
背景色：#4CAF50；
颜色：#ffffff；
}
%黄区{
背景颜色：黄色；
颜色：#000；
}
按钮[name=“start\u btn”]{
@扩大%的绿地面积；
}
按钮[name=“yellow\u btn”]{
@扩大区域；
}

“是否有CSS语法可以将CSS类应用于某些HTML对象？”-不，没有。CSS的目的是格式化元素，而不是改变它们的属性。但是有没有一种方法可以从一个类引用另一个类呢？不，不是在CSS中。在LESS/SASS中有这样做的方法。如问题中所述，JS不是一个选项。您可能可以使用SCSS/SASS

extend

（参考：）示例：

%消息共享{border:1px solid#ccc；padding:10px；color:#333}。消息{@extend%message shared；}

<button name="start_btn" class="greenArea"></button>

// Html
<button name="start_btn">I created dynamicly</button>
<button name="start_btn">I created dynamicly too</button>
<button name="yellow_btn">Whoa I'm yellow</button>


// Scss
%greenArea {
    background-color:#4CAF50;
    color:#ffffff;
}

%yellowArea {
    background-color:yellow;
    color:#000;
}

button[name="start_btn"]{
    @extend %greenArea;
}

button[name="yellow_btn"]{
    @extend %yellowArea;
}