避免继承css

【问题标题】：Avoid inherited css避免继承css
【发布时间】：2017-12-20 10:59:13
【问题描述】：

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

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

我怎样才能做到这一点？

问候，

【问题讨论】：

标签： .net html css razor

【解决方案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

【讨论】：

【解决方案2】：

改变你在局部视图中编写 css 的方式。

您应该执行以下操作，而不是只写 table {border: none;} 并覆盖每个表：

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

那么它就不会在其他地方覆盖您的table。

还有Read up on CSS Specificity score。

【讨论】：