避免继承css

Question

我有一个div，我在其中动态加载包含不同元素及其css的html，这个div在局部视图中，其css覆盖了div的元素css。

就像在局部视图中我们设置了css table{border:none;}但是在div元素中我们想要显示表css，因为它在table元素中定义。

我怎样才能做到这一点？

此致

Answer 1

一种解决方案是使用子选择器。

table td {
  border: 1px solid black;
}

.partial > table td {
  border: none;
}

<div class="partial">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
  <div>
    <table>
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
    </table>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Answer 2

更改在部分视图中编写css的方式。

您应该执行以下操作：

，而不是仅仅编写table {border: none;}并覆盖每个表

.partial-view-div table {
   border: solid 1px blue
}

然后它不会覆盖其他地方的table。

Read up on CSS Specificity score。