特定のdivにCSSを適用するにはどうすればいいですか？

Question

I

<form>> 
    <div class="form-group"> 
     <div class="search-col"> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="search-col"> 
      <input type="text" class="form-control" > 
     </div> 
    </div> 
</form> 

<form>> 
    <div class="form-group"> 
     <div class="search-col1"> 
      <input type="text" class="form-control"> 
     </div> 
     <div class="search-col1"> 
      <input type="text" class="form-control" > 
     </div> 
    </div> 
</form> 

が、私はなくsearch-col1の、form-groupとクラスsearch-colのform-controlの行動を過剰乗りたい、次のHTMLにしました。どうやってやるの？

は、これは私があなたのCSSセレクタに一致しない

.form-group .form-control .search-col{ 
    outline: none; 
    background-image: none; 
    -webkit-background-size: none; 
    -webkit-box-shadow: none; 
    -webkit-transition-duration: none; 
} 

Answer 1

あなたのHTML構造をしようとしているものです。

それは次のようになります。

.form-group .search-col { ... } 

または、そのことについては、それも考えられます。

.search-col { ... } 

Answer 2

ご注文はお使いのセレクタに間違っています。

.form-group .search-col .form-control {...} 

DOM要素の親子関係の順にCSSターゲットを指定する必要があります。これは基本的に.form-groupクラスの内部にある.search-colクラスの内部の.form-controlクラスをスタイルすることを意味しています。

Answer 3

個々のコンテナのスタイルを設定しようとしていますか？セレクタの順序が正しいことを他の人が指摘しているように。スタイルは各セクションで同じではないので、実際には何も「オーバーライド」する必要はありません。私は以下のサンプル画像を含んでいます。

.form-group { 
    background-color: #ccc; 
    padding: 20px; 
} 

.form-group { 
    padding: 10px; 
    margin: 5px; 
    border: 2px solid black; 
} 

.form-control { 
    background-color: #abc; 
} 

/* Notice how each class gives a different style */ 
.search-col { 
    background-color: #75AD63; 
    padding: 10px; 
} 

.search-col1 { 
    background-color: #A1D490; 
    background-origin: ; 
    padding: 10px 
} 

あなたが別のdivの子である特定の要素を上書きしたい場合は、私は以下の行ったようにそれらを選択するために、直角ブラケットを使用することができます。接続された画像が出力です。私は、フォーム・コントロールクラスのオリジナルのスタイルを変更していないか

.form-group > .search-col > .form-control { 
    background-color: red; 
} 

Example Styling

注意してください。