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>

在上面的示例中，post-inner-content的左右填充为10vw。当段落包含图像时，我希望它为0。 HTML＆amp;的结构我的Wordpress主题很大程度上强加了CSS，所以我无法对其进行重组。

我已经尝试了这个以及我能想到的每一个排列，但它并没有超越设置 - 没有变化。

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

我尝试过＆gt;周围有空格和没有空格，也没有＆gt;。我试过更具体，更不具体。我怀疑它不起作用，因为我在孩子身上设置了填充，而不是父亲。

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

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

Answer 1

最好将该类移动到其中一个父div，这样可以在选择元素时提供更大的灵活性：

<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

如果你愿意，你也可以将类添加到entry-content，或者p本身，但是父亲越高，你对孩子的条件样式的控制就越多，只要聪明一点。 / 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>

如何覆盖特定孩子的样式

2 个答案: