CSSの第2子の問題

Question

私は第2ボタンの背景色を変更しようとしています。しかし、それも最初のボタンに影響します。 は、ここに私のコードです：「」あなたは理由もなく「+」を使用してクラスを割り当てるのを忘れ

<table class="table table-striped table-bordered table-hover"> 
<thead> 
    <tr class="caption"> 
     <th class="center" colspan="8">Name</th> 
     <th class="center" colspan="3"> 
      <button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();"> 

      </button> 
      <button class="btn btn-white btn-info btn-bold" title="Cancel" onclick="Cancel();"> 

      </button> 

     </th> 
    </tr> 
    <tr> 
</table> 

Answer 1

。

基本的には、あなたのコードの読み取り：

取得クラステーブル、その子要素（それはクラスである）と効果（なぜ、このチェックを使用しなかった理由は、使用してのようなものですか？ 機能）要素THEADとその子要素..（などなど）

.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>th 

Answer 2

ただ番目のボタンに余分なクラスを与える場合。

button:nth-child(2) { 
    background: red; 
} 

しかし与える：このjsfiddle

HTML

<table class="table table-striped table-bordered table-hover"> 
<thead> 
    <tr class="caption"> 
     <th class="center" colspan="8">Name</th> 
     <th class="center" colspan="3"> 
      <button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();">Save 

      </button> 
      <button class="btn btn-white btn-info btn-bold second" title="Cancel" onclick="Cancel();">Cancel 

      </button> 

     </th> 
    </tr> 
</thead> 
</table> 

CSS

.second { 
    background-color: #123456; 
} 

Answer 3

あなたはnth-childセレクタを使用することができます見てくださいでも、このための準備ができてbtn-dangerクラスを持っている（あなたが使用しているように見える）

.btn-cancel { 
    background: red; 
} 

ブートストラップ、それは任意のカスタムCSSがなくても動作します：

<button class="btn btn-bold btn-danger" onclick="Cancel();">Cancel</button> 

ボタン、それは自分のクラスは、ここでより理にかなってい

利用可能な他の色があります：bootstrap docs。ところで

Codepen example with all tree cases

---

。ボタンのラベルは、あなたのコードでは動作しません、それは

<button class="btn btn-white btn-info btn-bold" onclick="Save();">Save</button> 

ことになっていない

<button class="btn btn-white btn-info btn-bold" title="Save" onclick="Save();"></button>