So überschreiben Sie einen Stil für ein bestimmtes Kind

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

Im obigen Beispiel hat post-inner-content eine linke und rechte Auffüllung von 10vw. Ich möchte, dass es 0 ist, wenn der Absatz ein Bild enthält. Die Struktur des HTML & CSS wird mir größtenteils von meinem Wordpress Theme aufgezwungen, so dass ich es nicht restrukturieren kann.So überschreiben Sie einen Stil für ein bestimmtes Kind

Ich habe versucht dies und jede Permutation davon kann ich mir vorstellen, aber es überschreibt nicht die Einstellung - es gibt keine Änderung.

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

Ich habe versucht mit und ohne Leerzeichen um die>, und auch mit nein>. Ich habe versucht, spezifischer und weniger spezifisch zu sein. Ich vermute, dass es nicht funktioniert, weil ich das Padding auf dem Kind setze, nicht das Elternteil.

Ich habe auch versucht die Polsterung auf 0 überall Einstellung (die funktioniert) und mit: nicht überall anwenden, aber das Bild wie folgt (was nicht):

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

Quelle

2016-11-30 marcp

So wie du es jetzt haben, ist es nicht möglich, mit nur CSS zu tun, werden Sie Javascript erforderlich. Wenn Sie den HTML-Code jedoch ändern können, können Sie dem Elternelement eine Klasse hinzufügen, um anzuzeigen, dass sie ein Bild enthält, und von dort aus fortfahren. Mehrere Klassen werden mit einem Leerzeichen im HTML-Code getrennt und mit der Verkettung als 'div.class1.class2' ausgewählt. – pol

Sie würde besser diese Klasse zu einem der übergeordneten divs bewegt, die Ihnen mehr Flexibilität geben, wenn Elemente der Auswahl:

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

Ihre CSS wäre so etwas wie:

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

Sie könnten auch die Klasse zum Eintrag-Inhalt hinzufügen, wenn Sie wollten, oder das p selbst, aber je höher die Eltern, desto mehr Kontrolle haben Sie über das bedingte Styling der Kinder, seien Sie einfach schlau darüber.

Quelle

2016-11-30 01:51:08

Ich fand, dass das Ändern des HTML über PHP viel einfacher war als alles andere. Hätte das von Anfang an berücksichtigen sollen. – marcp

Sie können einen negativen Rand von 10px auf das Bild setzen, um das Padding rückgängig zu machen, oder vielmehr, dass das Bild über dem Padding angezeigt wird.

.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>

Quelle

2016-11-30 02:50:29

So überschreiben Sie einen Stil für ein bestimmtes Kind

Antwort

Verwandte Themen