Question

例如，如果我使用

<table class='table'></table>

和

<div> <table class='table'></table> </div>

两个表标签都将获得bootstrap .table样式。但是当我使用css时，如果我想将样式应用于两者，我必须使用2种不同的样式调用

.table{};

div .table{};

bootstrap是如何做到的？

Answer 1

基本上，你说的是什么 ...如果我想将两种风格应用于两者，我必须使用两种不同的样式调用是不正确的。

见这个例子：

https://jsfiddle.net/pablodarde/ecxxcx3j/

如果设置类“table”，则代码中的所有表都将遵循类规则。但是，如果您专门化某些表格，例如div .table，则这些表格将遵循div .table规则。

尝试使用体验，从css代码中删除div .table。

css引擎之前开始寻找最专业的元素，并继续寻找直到达到最一般的规则。

<强> HTML

<table class='table'>
  <tr>
    <td>T1 C1</td>
    <td>T1 C2</td>
  </tr>
</table>

<div>
  <table class='table'>
    <tr>
      <td>T2 C1</td>
      <td>T2 C2</td>
    </tr>
  </table>
</div>

<div>
  <div>
    <div>
      <table class='table'>
        <tr>
          <td>T1 C1</td>
          <td>T1 C2</td>
        </tr>
      </table>
    </div>
  </div>
</div>

<强> CSS

.table {
  border: 1px solid red;
  margin-bottom: 10px;
}

div .table {
  border: 1px solid green;
}

bootstrap css如何针对所有类.table独立于父/子？

1 个答案: