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

【问题标题】：How to apply existing CSS class to a generated HTML id/class from CSS file如何将现有的 CSS 类应用于从 CSS 文件生成的 HTML id/class
【发布时间】：2019-12-22 14:19:39
【问题描述】：

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

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

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

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

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

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

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

button[name="start_btn"]{
  apply-class: greenArea;
}

【问题讨论】：

“是否有 CSS 语法可以将 CSS 类应用于某些 HTML 对象？” - 不，没有。 CSS 的目的是格式化元素，而不是改变它们的属性。
但是有没有办法从另一个类中引用一个类？
不，不是在 CSS 中。在 LESS/SASS 中有一些方法可以做到这一点。

标签： html css

【解决方案1】：

您可以使用 SASS 占位符选择器来做到这一点。他们在文档中解释了well。

Codepen

// 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;
}

【讨论】：

【解决方案2】：

在 CSS 中没有办法做到这一点，因为 CSS 不会更改元素属性，但或者，您可以使用 hover,active,focus..... 来检测元素大小写并将一些代码应用于大小写。 CSS cases link

【讨论】：

【解决方案3】：

您可以改为这样处理：

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

这将创建元素为：

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

【讨论】：

如问题所述，JS不是一个选项
那么您可能可以使用 SCSS/SASS extend(ref: sass-lang.com/guide) 示例：%message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } .message { @extend %message-shared; }