Básicamente, tengo una lista de
etiquetas de un editor WYSIWYG que tienen un margen inferior de 20px. Sin embargo, si el hermano del
la etiqueta tiene una etiqueta, me gustaría eliminar ese margen para que la etiqueta pueda establecer el margen. ¿Cómo haría esto?
este es mi estilismo
.wysiwyg { p { margin-bottom: 20px; } }marcado básico
<div class="wysiwyg"> <p></p> <p></p> <p></p> // Styling must stop here so that there is no bottom margin from the first above <p> tag <img /> <p></p> <p></p> <p></p> </div>Puede usar tilde ~ , seleccionará todos los elementos después del selector actual y luego restablecerá la regla de todos los p después de img :
.wysiwyg { p { margin-bottom: 20px; } img ~ p { margin-bottom: 0; } }Aquí una demostración
.wysiwyg p { margin-bottom: 20px; background-color: red; } .wysiwyg img ~ p { margin-bottom: 0; background-color: transparent; } <div class="wysiwyg"> <p>1</p> <p>2</p> <p>3</p> <img /> <p>4</p> <p>5</p> <p>6</p> </div>Más información se puede encontrar aquí
Simplemente establezca un margin-top negativo para las etiquetas img que están precedidas por una etiqueta p :
.wysiwyg { p { margin-bottom: 20px; } p + img { margin-top: -20px; } }