如何将类添加到 div 内的所有元素？答案

【问题标题】：How to add class to all elements inside div?如何将类添加到 div 内的所有元素？
【发布时间】：2015-10-14 11:06:47
【问题描述】：

我在一个 div 中有 100 个按钮：

<div class="button_group">
  <button> ... </button>
  <button> ... </button>
  <button> ... </button>
  ...
</div>

我想以引导样式设置所有按钮的样式。所以，我需要将

.button_group button {
  ... add class="btn" to all elements ...
}

有可能吗？正确的语法是什么？

谢谢！！

【问题讨论】：

你会使用 css 来设置所有按钮的样式，但要添加一个类，你通常会使用 javascript

标签： css

【解决方案1】：

假设您有一个类似 jquery 的库，您将向所有 <button> 元素添加一个类 btn：

$('div.button_group button').addClass('btn');

编辑：如果您使用的是 sass 或更少版本的引导程序，我鼓励您这样做，您可以尝试扩展 btn 引导程序类。与上面提到的 javascript 解决方案相反，它不会添加类 btn 到元素中，但它们会继承 btn 类的样式。这是 sass 解决方案：

.button_group {
    button {
        @extend .btn;
    }
}

【讨论】：

我永远不会使用 jQuery 来实现 OP 想要的。他只想定位特定的按钮，这很容易用 CSS 完成。我认为他的问题应该是：我如何定位.....
你在这里做出可以用 cmets 中的 op 澄清的假设。 OP 的问题是如何为所有元素添加一个类？ 所以我回答了这个问题。 OP 正在使用引导程序，似乎他想重用 btn 类。
我将通过另一种可能性来完成答案，以“应用”引导程序的 btn 类但没有 js。
是的，我知道我在做一个假设。你的回答很好。别担心，伙计。
感谢您的回答。 @extend 的示例对我不起作用，可能是因为我不使用 sass 或更少版本的引导程序。使用 jQuery 的示例也不能正常工作，我有错误：未捕获的类型错误：无法读取 null 的属性“addClass”。这可能是因为我可能在模板中未正确使用 jQuery 函数调用。我会考虑一些解决方法，非常感谢您的宝贵时间！

【解决方案2】：

HTML

<div class="button_group">
  <button> ... </button>
  <button> ... </button>
  <button> ... </button>
</div>

CSS

.button_group > button {width: 100px; height: 50px;}

还有小提琴https://jsfiddle.net/049Lj4LL/4/

如果每个按钮都相同，则无需为每个按钮添加class="btn"，只需向父级div 添加一个类，就像您拥有class="button_group" 一样，以便能够识别该特定按钮组。点赞https://jsfiddle.net/049Lj4LL/6/ 点赞https://jsfiddle.net/049Lj4LL/7/

【讨论】：

感谢您的回答，但这些是如何设置按钮样式的示例。引导类“btn”已经有了它的样式，我只想重新使用它。
您从未在问题中指定引导程序，在使用 SO 问题时，最好将所有相关条件放在您的问题中。由于您使用的是引导程序并且您“需要”btn 插入到这么多字段中，因此您将需要使用 javascript 之类的东西，您不能在纯 css 中这样做。