如何将现有类添加到 css 文件中的 td？答案

【问题标题】：How to add an existing class to td in css file?如何将现有类添加到 css 文件中的 td？
【发布时间】：2016-04-27 13:32:43
【问题描述】：

我想将 Bootstrap 中的 text-center 类应用于我表中的所有 td 单元格。但我不想为所有 40 个tds 执行此操作：<td class="text-center"></td>

显然这是行不通的；

#mytable td {
    text-center; //class already exists
}

那么如何在 css 文件中将这个类应用到我的 tds 中？

【问题讨论】：

【解决方案1】：

如果我正确理解了您的问题，您不想将所需的类一一写入所有tds。相反，您始终可以使用编辑器的 搜索和替换 功能（本例中为 PHPstorm 中的 ctrl + r）：

使用 JS 或额外的 CSS 等其他方法充其量只会造成不必要的资源浪费，最坏的情况会导致代码混乱。

【讨论】：

【解决方案2】：

是的，但不是纯CSS。

您可以在LESS 中执行此操作，如下所示：

#mytable td {
    .text-center;
}

或者您也可以使用 jQuery 为您当前的 td 元素添加类

$('#mytable td').addClass('text-center');

【讨论】：

【解决方案3】：

由于我假设您使用的是纯 CSS，因此最简单的解决方案可能只是将代码复制到您的样式表中，除非这违反了许可。如果您使用的是预处理器，例如 SASS，您可以使用 @extend .text-center 功能，这是我强烈推荐的功能。¨

另一种解决方案是使用 javascript，但这并不完全可靠。

【讨论】：

【解决方案4】：

要在 css 中做到这一点，你可以这样做：

#tableId td {
    text-align: center;
}

如果您不介意将居中文本应用于所有单元格（包括 <th/> ），您可以在 html 中应用 text-center 类：

<table class="table text-center">
   ...
<table>

【讨论】：

【解决方案5】：

如果不想手动添加类，可以写一个类似的脚本

JavaScript

var tdList = document.querySelectorAll('#mytable td');
[].forEach.call(tdList, function(el){
  el.classList.add('text-center');
});

jQuery:

$('#mytable td').addClass('text-center');

如果没有，也可以通过在 CSS 中添加以下内容来达到类似的效果：

#mytable td {
  text-align: center;
}

此外，如果您使用支持多个光标的智能文本编辑器（如 sublime 或括号），您只需使用鼠标选择所有 <td> 并编写一次 class="text-center"。例如，在括号中，您可以按住 Ctrl 并单击要添加光标的位置。

如果你安装像emmet这样的扩展，你可以简单地写

#mytable>td.text-center*40

然后按Ctrl+AltEnter，即可生成整个标记。真的，如果你懒得打字……它们有很多方法。

【讨论】：