特定の子のスタイルをオーバーライドする方法

Question

<div class="post-inner-content"> 
    <div class="entry-content"> 
     <p> Some text here</p> 
    </div> 
</div> 
<div class="post-inner-content"> 
    <div class="entry-content"> 
     <p> <img src="blahblah" class="img_content"></p> 
    </div> 
</div> 

上記の例では、内側の内容の後に10vwの左右の詰めがあります。段落にイメージが含まれている場合は0にします。 HTML & CSSの構造は、主に私のWordPressのテーマによって私にとらわれているので、私はそれを再構成することはできません。

私はこれを試してみましたが、私は考えることができますが、設定を上書きしません。変更はありません。

div.post-inner-content>div.entry-content>p>img.img_content {padding: 0;} 

私は、空白を空白にして試しましたが、空白にはしません。私はより具体的ではなく、あまり具体的でないことを試みました。私はそれが機能しないと思う、私は子供の上にパディングを設定しているので、親ではない。 （しない）、次のようにどこにでもそれを適用していないが、画像：

は

div.post-inner-content{padding: 0;} 
div.entry-content p :not(.img_content) {padding:0 10vw; } 

Answer 1

あなたがなりたい

は私もどこでも0にパディングを設定する（働く）と使用して試してみましたほうの要素を選択するときに、あなたに多くの柔軟性を与える親のdivの一つに、そのクラスを移動：

div.post-inner-content p {} 
div.post-inner-content.img_content p {} // will override the above 

：

<div class="post-inner-content"> 
    <div class="entry-content"> 
     <p> Some text here</p> 
    </div> 
</div> 
<div class="post-inner-content img_content"> 
    <div class="entry-content"> 
     <p> <img src="blahblah"></p> 
    </div> 
</div> 

あなたのCSSは次のようなものになるだろう

あなたが望むのであればentry-contentにクラスを追加することもできますし、p自体を追加することもできますが、親の上に行くほど子どもの条件付きスタイリングよりも多くのコントロールが得られます。

Answer 2

イメージに10pxのマイナスのマージンを設定すると、パディングを元に戻すことができます。イメージをパディング上に表示することもできます。

.post-inner-content { 
 
    padding-left: 10px; padding-right: 10px; 
 
    border: 1px solid gray; 
 
    background-color: #ddd; 
 
} 
 

 
img { 
 
    margin-left: -10px; margin-right: -10px; 
 
}

<div class="post-inner-content"> 
 
    <div><p>Hello Bob.</p></div> 
 
</div> 
 

 
<div class="post-inner-content"> 
 
    <div><p><img src="https://i.stack.imgur.com/h8oli.jpg"></p></div> 
 
</div>