css同じクラス名を持つ別の要素の子であるクラスのスタイルを指定する方法

Question

私の質問には最高の言葉ではないかもしれませんが、これは私が達成しようとしているものです。

私は多くのコンポーネント（angular1.xのディレクティブ）を使用しているbootstrap 3スタイリングでAngular2アプリを使用しています。これにより、コンポーネント内にコンポーネントがあることもあります。

私のページの1つに、ブートストラップクラス.wellがあり、それに.wellを利用する別のコンポーネントがあります。したがって、あなたがブートストラップに慣れているなら、別の.wellの中の.wellはかなりのパディングをもたらします。

だから、別の.wellの内部にある場合は、.wellの内側のパディングを削除するCSSセレクターを作成したいと思います。ここで

は、私がこれまで試したものです。これらの

.well .well { 
    padding: 0; 
} 

div#doubled-up-well .well { 
    padding: 0; 
} 

div.well .well { 
    padding: 0; 
} 

div.well form.well { 
    padding: 0; 
} 

どれも動作するようには思えない、私がここで間違って何をやっていますか？

<div class="well" id="doubled-up-well"> 
    <my-custom-component> 
    <form class="well {some more angular classes here}"></form> 
    </my-custom-component> 
</div> 

それはそこには私のform要素で定義された複数のクラスであることに関係していない。ここで

は、より良いアイデアを与えるために構造化されますどのようにですか？それは私のdivと私のformの間に要素があるからです（これが私のCSSセレクタで>を使わなかったのです）？

編集：私はまた、これらを試してみた：

div#doubled-up-well > member-add-member-demo > form.well.ng-untouched.ng-pristine.ng-valid { 
    padding: 0; 
    margin-bottom: 0; 
    background-color: red !important; 
} 

div#doubled-up-well form.well.ng-untouched.ng-pristine.ng-valid { 
    padding: 0; 
    margin-bottom: 0; 
    background-color: red !important; 
} 

編集：ここではページにレンダリングされ、正確なHTMLでフィドルです。実際のところ、私の実際のアプリではうまくいきません。

https://jsfiddle.net/rv69f6ok/2/

Answer 1

私もこの問題に遭遇してきた、と私は、彼らが変更する必要のある特定のコンポーネントのスタイルを書かなければならなかったので、私の場合にはそれがでした。グローバルなCSSまたは親コンポーネントのCSSに.well .wellを書き込もうとすると、各コンポーネントのスタイルがその特定のコンポーネントに分離されているため、機能しません。

あなたのケースでは、埋め込みを取り除きたい子供のコンポーネントに.wellのスタイルを書きます。削減された埋め込みを適用したくない他の領域でそのコンポーネントを使用している場合は、child .wellクラスが含まれている要素と同じ要素にいくつかのクラスを追加することになります。その余分なクラスは、独自のパディング値を減らすフラグとして機能し、.foo.well {padding：0;}のような特殊性を追加することによって、あなたのCSSの.wellクラスを上書きします。 }