なぜ私のCSSテーブルスタイルが混じっているのですか

Question

私がここで間違ったことを理解できません。 CSSスタイルは、両方の私のテーブルのために別々でなければなりませんが、「rcorners1」テーブル「はwater_table」

の設定によって影響を受けているように見える私は、最初のテーブルのための2つのテーブルのCSS

table.water_table tr:nth-child(even) {background-color: #f2f2f2} 
table.water_table tr:hover {background-color: #f5f5f5} 
table.water_table th {background-color: #ffffff;} 
table.water_table th, td { 
    padding: 15px; 
    text-align: left; 
} 

私の最初のテーブルのルックスを持っています

<table border="0" align="center" class="water_table" id="water_table"> 

私の第二のテーブルのCSSのような

table.rcorners1 { 
    border-radius: 10px; 
    border: 1px solid #a4b3bd; 
    padding: 2px; 
    margin: 3px; 
    width: 120px; 
    height: 160px; 
    float: left; 
} 

私の2番目の表は次のようになります

<table width="100%" border="0" class="rcorners1" id="rcorners1"> 

Answer 1

これが正しい解決策であるかどうかわかりません。私が問題を解決するためにしたのは、 "water_table"をCSSスタイルファイルから削除し、 "water_table"が表示される前にHTML内にスタイルブロックを作成することです。

<style> 
table.water_table tr:nth-child(even) {background-color: #f2f2f2} 
table.water_table tr:hover {background-color: #f5f5f5} 
table.water_table th { 
    background-color: #ffffff; 
    /*color: white;*/ 
} 
table.water_table th, td { 
    padding: 15px; 
    text-align: left; 
} 
</style> 

Answer 2

一般的に、あなたのHTML内のインラインスタイルブロックを配置する必要はありません - あなたがそうした場合、それはあなたの文書の先頭ではなく、体にする必要があります。

しかし、スタイルを動かすことで問題が解決された場合、これはあなたのCSSファイルにあなたの好みのスタイルを上書きするものがあることを意味します。

多くの場合、ブラウザインスペクタで要素に関連付けられたすべてのスタイルが表示されます。あなたがあなたの要素を調べるならば、私はCSSファイルからいくつかの追加のスタイルが出てくるのを見るでしょう。