継承されたCSSを避ける​​

Question

私はdivを持っています。これは、動的に異なる要素を含むHTMLを部分的に表示し、そのCSSがdivの要素cssをオーバーライドしています。

部分図のように、私たちはcss table{border:none;}を設定しましたが、div要素には表要素に定義されているとおりに表cssを表示します。

どうすればいいですか？

よろしく、

Answer 1

部分表示でCSSを書く方法を変更します。そして、それは他の場所であなたのtableを上書きしません

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

：

代わりの

がちょうど table {border: none;}を書き込み、すべてのテーブルを上書きし、あなたのような何かを行う必要があります。

Read up on CSS Specificity score。

Answer 2

解決策の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