如何仅使用 CSS 而不使用 JavaScript 将 CSS 类动态添加到 html 元素答案

【问题标题】：How to add a CSS class to an html element dynamically using only CSS, no JavaScript如何仅使用 CSS 而不使用 JavaScript 将 CSS 类动态添加到 html 元素
【发布时间】：2021-02-25 18:47:48
【问题描述】：

我在一个较旧的 html 项目上工作，我对 DOM 几乎没有控制权。我不能像这样手动添加 css 类：

<div class="my-class">My Div's Content</div>

我宁愿以这种方式指定选择器：

body > div:first-of-type > table:nth-of-type(2) > tr:last-of-type > td ....

它变得很长而且不可读，尤其是当我必须指定位于不同嵌套级别的 html 元素时。

是否可以为上述指定的元素动态添加一个 css 类以使用它（添加的类），而不是显式选择器。

在伪代码中我会想象如下内容：

 body > div:first-of-type > table:nth-of-type(2) 
 > tr:last-of-type > td:add-class('simplified-selector')

【问题讨论】：

不能通过 CSS 动态添加类。
我也不知道通过 CSS 添加类的任何方式。尽管如此，我还是写了这个问题，以了解是否有人建议这样做。
很抱歉再次发表评论，只是为了快速澄清：这不是寻找黑客甚至意见的问题。恐怕实际上没有办法完成您在 CSS 中的要求。祝你好运。
无法使用 CSS 在 HTML 元素中添加类。您可以使用 jquery、javascript、PHP 添加类。

标签： html css sass

【解决方案1】：

要添加动态类使用 javascript 或 Jquery，您可以像这样使用 javascript 添加 CSS，但这不可能是您直接在 css 中想要的。

<div class="myelement">elem</div>
<script>
let myElem = document.querySelector(".myelement");
document.getElementById(myElem).style.color = "red";
</script>

也许用 SASS 看看嵌套或函数..：https://la-cascade.io/limbrication-des-selecteur-dans-sass/

【讨论】：

谢谢，我知道 sass 嵌套，但也觉得不太方便。如果我们可以使用 css ::before ::after 添加内容，那么我想也可能存在一些添加类的方法，尽管到目前为止我认为您认为这是不可能的。
我写过不想用JS了。而 jQuery 就是 JS。
如果您无法手动添加类或使用 Jquery，您没有其他解决方案抱歉，祝您好运！

【解决方案2】：

通过css给html添加动态类确实是根本不可能的。但是......就像思考周围（或向后）的想法一样：

大多数情况下，您不需要这么多类来编写清晰的样式。在大多数情况下，只有包装元素需要一个类来构建可读的 css 结构。在某些情况下，该部分的一个类就足够了。

所以在你的例子中，而不是给单个元素一个类：

body > div:first-of-type > table:nth-of-type(2)  > tr:last-of-type > td:add-class('simplified-selector')

只写：

body > div:first-of-type > table:nth-of-type(2): add-class('table2')

比 css direkt 中的其余部分：

.table2 tr:last-child {
   
   ... your css ...

}

这极大地缩短了您的 html 工作，并且您的 css 结构也保持可读性。在过去的美好时光（我相信在 15 或 20 岁的时候使用过机制？）编写 css 的技术的目标是使用尽可能少的类 ;-)

今天的“类溢出”和持续的“div 爆炸”伴随着伟大的框架（如 Bootstrap）......今天也有人说这是糟糕的代码，因为样式与预期无关html 的语义，应该只简化为其中的信息；-)

【讨论】：

谢谢！你猜对了，我在这样一个项目中工作，其中指定的类很少。我什至没有 .table2 类。事实上，这个问题正是包含了这一点——如何添加这个“.table2”类。现在我已经用 JS 完成了，但是如果出现了一些 css 解决方法，我宁愿我们使用它。方法 ":add-class(simplified_selector) " 实际上并不存在。我刚刚介绍它是为了更清楚地说明我在寻找什么样的方法或方法。