如何覆盖特定儿童的风格

<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;}

我已经尝试过，没有空格>，也没有>。我尝试过更具体，更具体。我怀疑它不起作用，因为我正在对孩子而不是父母进行填充。

我也试着填充设置为0无处不在（工作），并使用：不要到处套用，但相关图片如下（不）：

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

来源

2016-11-30 marcp

你现在的样子，它不可能与刚刚完成的CSS，你需要的JavaScript。如果您可以更改HTML，则可以向父级添加一个类，以指示它包含图像，然后从那里开始。多个类在HTML中用一个空格分隔，并将它们连接为'div.class1.class2'。 – pol

你会更好的移动该类父的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

如果需要，还可以将类添加到条目内容或p本身，但是父项越高，对子项的条件样式的控制就越多，只需要明智就可以了。

来源

2016-11-30 01:51:08

我发现通过PHP更改html比任何其他更容易。应该从一开始就考虑到这一点。 – marcp

您可以在图像上放置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>

来源

2016-11-30 02:50:29

如何覆盖特定儿童的风格

回答

相关问题