javascript - 我可以用它的名字引用一个 bootstrap css 选择器吗？

Question

例如， Bootstrap 表选择器定义:

.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}

现在我想在我的内容中使用这种样式，但是内容是由所见即所得的编辑器生成的，所以 <table>...</table>在里面。我不能在这些内容中指定选择器，我只知道 div 中的这些内容，比如

<div id="editor_content">...</div>

那么，我可以像这样定义一个选择器吗？让所有<table>在 div 中显示 Bootstrap 样式。

现在我只是将相同的代码复制到其中。

#editor_content table{
 << reference .table-bordered >>
}

谢谢

Answer 1

这是一个工作示例，它将一些 Bootstrap 类添加到 #editor_content div 中的表中。

$( '#editor_content table' ).addClass( 'table' ).addClass( 'table-hover' ).addClass( 'table-bordered' ).find( 'thead' ).addClass( 'thead-dark' );

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor_content">
  <p>Some stuff</p>
  <table>
    <thead>
      <tr>
        <th>Col1</th>
        <th>Col2</th>
        <tr>
    </thead>
    <tbody>
      <tr>
        <td>a</td>
        <td>b</td>
      </tr>
      <tr>
        <td>c</td>
        <td>d</td>
      </tr>
    </tbody>
  </table>
  <p>Some other stuff</p>
</div>