子要素に適用するCSSスタイルを避ける

Question

子タグ要素に親タグスタイルが適用されない方法はありますか？

私はいくつかのデータを表示する必要がありますので、見やすくするためにそれらをテーブルに揃えてください。私はテーブルにいくつかのスタイルを適用して、見栄えを良くしたいと考えています。私は私のテーブルにプラグインのようないくつかの追加コンポーネントを使用しています。だから、自分のテーブルのtrタグにスタイルを適用すると、それらがtrタグを持っていれば、それらのタグにも適用されます。これは起こりません...

私は継承を避けることができる方法はありますか？

<style> 
/*The plug-in component may have table tr tags.So the following styles should be applied to plug-in..*/ 
    table tr{ 
    background:#434334; 
    border-radius:5px; 
    } 

</style> 

Answer 1

CSSはそのように継承されます。

1. ベスト：彼らは唯一
2. 良いにあなたがそれらを必要とする要素に適用されるように、あなたのセレクタを改善：既存のマークアップがない場合あなたは、いくつかのオプションを持って「継承しない」にしたい場合あなたが上記をやることを許可しないで、セレクタを改良するための付加的な属性（例えば、余分なものclass）を与える必要がある要素を与えることによって助けてください。
3. 悪い：セレクタを書く結果を「元に戻す」ために、より多くのセレクタを書く場合によってケース

あなたのケースでは、最初の2つの組み合わせが動作するように見えます。あなたは、あなたのテーブルにid="foo"を与え、その後>がさらに要素ツリーの下の表の行に適用されるのスタイルを防ぐchild selector、ある

table#foo > tbody > tr { /*...*/ } 

にセレクタを変更することができます。

Answer 2

一つの解決策は、あなたのスタイルtable tr.style1{ ...に名前を付けることであろうと、あなたの<tr>年代のそれぞれにあなただけclass属性、すなわち<tr class="style1">を追加することができます。