複数のクラスが1つのラベルにある

Question

<table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>Firstname</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Anna</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Debbie</td> 
      </tr> 
      <tr> 
       <td>3</td> 
       <td>John</td> 
      </tr> 
     </tbody> 
</table> 

これはブートストラップの例のスニペットです。 は1つのラベルに複数のクラスがあることに気づいたので、これらの2つのクラスの関係は何ですか？ テーブルストライプのサブクラスはテーブルのサブクラスですか？

そして、CSSはこの要素のスタイルをどのように変更しますか？ のスタイルはのテーブルストライプの表のスタイルを上書きしますか？

さらに、クラスごとにどのようにこの要素を選択する必要がありますか？

Answer 1

私はあなたがまだ基本的な仕組みがどのように動作するかを学ぶまでは、フレームワークから離れることを学ぶために、はるかに優れていることを示唆しています。とにかく：

あなたが言及したクラスは全く関係がありませんが、実際にはすべてのCSSクラスは全く関係がありません。

.table { 
    border: 1px solid black; 
    width: 100%; 
    // other common properties you find in a table 
} 

、そこに他が行く：：彼らは、例えば自分で目立つ

.table-striped { 
    border: 1px dashed black; 
    // other properties you can find on a striped table 
} 

あなたはtableクラスtable-stripedを含むテーブルでtable-stripedを呼び出すようちょうどtableいるの共通プロパティをオーバーライドしますborderであり、要素に適用されます。

どのようにオーバーライドしますか？それはCSSで優先と呼ばれるものです。最後にスタイルが適用されても後で適用されますが、後でCSSオーバーライドが発生します。IFセレクタは一致しません。

そして最後の事：

.table { 
    // stuff 
} 

.table-striped { 
    // stuff 
} 

// if selector contains both classes 
.table.table-striped { 
    // stuff 
} 

// if a table element contains .table class 
table.table { 
    // stuff 
} 

// and so on... 

は全く関係ありません：それはどのようにあなたのようにクラスを選択しようとしている問題ではありません。あなたが理解するのを助けることを願って。

Answer 2

ブラウザは両方のクラスの値を使用して、その要素に適用します。

あなたは複数のクラスは、彼らがお互いにどんな関係があることを意味するものではありませんしているそれらのそれぞれまたはそれらの両方

​​

Answer 3

に基づいて要素を選択することができます。私が知る限り、<table class="table table-striped">は<table class="table-striped table ">とまったく同じです。

あなたは以下の組み合わせのいずれかでそのクラスを使用して、このテーブルを選択します：

• .table
• .table-stripped
• .table.table-strippedまたは.table-stripped.table
CSSが影響を受けるだろうどのように

が依存スタイル。名前によって、私は.tableがすべてのブートストラップテーブルとしてそれをスタイルすると仮定します。 .table-strippedは、奇数行と偶数行に異なる背景色を追加します。 Example

Answer 4

これは単なるブートストラップCSSスタイリングであり、1つの要素に必要なだけのクラスを持つことができます。テーブルストライピング後にもう1つのクラスを追加し、独自の.cssファイルを作成し、必要に応じて編集することができます。または、idをテーブルに追加して、そのようにスタイルすることもできます。