如何覆盖特定孩子的风格

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>

在上面的示例中，inner-content的左右填充为10VW。当段落包含图像时，我希望它为0。HTML＆amp;CSS在很大程度上被我的WordPress主题抓住了我，因此我无法重组。

我已经尝试了这一点，我能想到的每一个置换都没有覆盖设置 - 没有变化。

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

我在>周围和没有空格的情况下尝试过，也没有>。我尝试变得更具体，更具体。我怀疑这是行不通的，因为我将孩子放在孩子身上，而不是父母。

我还尝试将填充物设置为无处不在的0（有效），并使用：不要在任何地方应用它，而是图像如下（未）：

：

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

Answer 1

您最好将该类移至一个父级之一，在选择元素时会为您提供更大的灵活性：

<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将是：

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

，如果需要的话，您也可以将课程添加到入门容器中，或者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>