0

私が書いたいくつかの CSS/HTML コードで奇妙な結果が見られます。私の CSS には 2 つの異なるクラスがあります。それらをクラスAとクラスBと呼びましょう。クラス A は、テーブルに境界線を持たないように定義します。

div.classA table, th, td { borders:none }

クラス B は、テーブルを灰色の境界線を折りたたむように定義します。

div.classB table, th, td  { border:1px solid grey }

私のHTMLはその後

<div class="classB">
  <table>
    <thead>
      <th>Text</th><th>More text</th>
     </thead>
  </table>
</div>

表の見出し (classB には境界線が必要であるため) は、境界線なしで表示されます。Firefox を使用してページを調べると、テーブルが classA div 要素内にあるにもかかわらず、classA が classB の設定をオーバーライドしたことがわかります。

私は何が欠けていますか？

4

3 に答える 3

5

あなたのセレクターは正しくありません。私はあなたがこれを望んでいると思います：

div.classA table, div.classA th, div.classA td { border: 0; }

div.classB table, div.classB th, div.classB td  { border: 1px solid grey; }

(各タグの前に div.classname が必要です。)

于 2012-10-04T22:31:53.370 に答える
0

あなたのテーブルtheadには はありませんがtd、代わりにthand があり、スタイルを適用するだけthで

div.classA table thead th { border:none }
div.classB table thead th { border:1px solid grey }

デモ。

更新:テーブル全体 (classB) の Border については、これを試すことができます

div.classB table{
    border-collapse:collapse;
}
div.classB table th, div.classB table td { 
    border:1px solid grey;
}

デモ。

于 2012-10-04T22:38:22.867 に答える
0

対処すべき問題がいくつかあります。

1

HTML タグを正しく使用していません。

<div class="classB">
  <table>
    <thead>
      <th>Text</th><th>More text</th>
     </thead>
  </table>
</div>

次のようにする必要があります。

<div class="classB">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
     </thead>
  </table>
</div>

2

「border」でタイプミスした「border」：

    div.classA table, th, td { borders:none }

次のようにする必要があります。

    div.classA table, th, td { border:none }

3

宣言を分割するためにコンマを使用しているため、ボーダーはtd要素に設定され、クラスによって両方がその要素を個別にターゲットにします。
さらに、スコープを調整する必要があります。

    div.classA table, th, td { border:none }
    div.classB table, th, td { border:1px solid grey }

次のようにする必要があります。

    div.classA table th, div.classA table td { border:none }
    div.classB table th, div.classB table td { border:1px solid grey }

すべてを適切に機能させるには、次を使用する必要があります。

この実用的なフィドルの例を見てください!

HTML

<div class="classA">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
    </thead>
  </table>
</div>
<br>
<br>
<div class="classB">
  <table>
    <thead>
      <tr><th>Text</th><th>More text</th></tr>
    </thead>
  </table>
</div>

CSS

div.classA table th, div.classA table td { border:none }
div.classB table th, div.classB table td { border:1px solid grey }
于 2012-10-04T22:54:20.013 に答える