CSS: cómo reemplazar el valor máximo de ancho con un valor mayor (menos restrictivo)

Tengo un archivo css con este estilo:CSS: cómo reemplazar el valor máximo de ancho con un valor mayor (menos restrictivo)

.filefield-element .widget-edit {max-width: 70%;}

quería aumentar el ancho máximo sin modificar ese archivo css, así que creé un archivo CSS personalizado con este estilo:

.filefield-element .widget-edit {max-width: 99%;}

en el panel "html/estilos", veo que los estilos se enumeran en el orden correcto:

.filefield-element .widget-edit { 
    max-width: 99%; 
} 

.filefield-element .widget-edit { 
    float: left; 
    max-width: 70%; 
}

Sin embargo, "max-width: 99%" no anula "max-width: 70%". Parece que se usa el valor más restrictivo (70%), incluso cuando el valor menos restrictivo (99%) es lo primero.

¿Hay alguna manera de anular un valor de ancho máximo con un valor más grande (menos restrictivo)?

Fuente

2011-02-07 moondog

Puede anular (desconexión) de ancho máximo con

.foo{ max-width:none; }

... para borrar cualquier heredaron de ancho máximo.

Fuente

2012-11-26 13:11:00

'' width: auto'' pero '' max-width: none'' wtf were w3c thinking o quien lo haya decidido – OZZIE

@OZZIE, los nombres tienen perfecto sentido. 'max-width' es" anulable ": o tiene uno o no. Mientras que un elemento siempre tiene un 'ancho', que puede o no ser explícito. 'auto' le permite volver explícitamente al ancho implícito, pero el ancho todavía existe. – harpo

Este es un problema de especificidad. Eche un vistazo al http://htmldog.com/guides/cssadvanced/specificity/.

Básicamente, necesita hacer una más específica que la otra. Ponga el elemento que contiene antes de .filefield-element .widget-edit y se anulará

Fuente

2011-02-07 17:29:11

Gracias por la sugerencia. Todavía sin suerte. Traté de cambiar ".filefield-element .widget-edit" a ".form-item .filefield-element .widget-edit". – moondog

Sé que esto es viejo, pero pensé en agregar lo siguiente. Si lo miras, dice que lo estaba viendo en el panel "html/styles". En el panel de estilo en la mayoría de los inspectores, primero se muestran las reglas de especificación más primordiales y más altas. Entonces no hubo problema con la especificidad. – John

Intente utilizar !important o selector de con mayor especificidad.

Fuente

2011-02-07 17:29:28 duri

+1, esto tiene que funcionar. – jolt

Gracias por la sugerencia. Intenté ambos métodos: ¡sumar! Importante y crear un selector con mayor especificidad, pero todavía no tuve suerte. Este es el estilo que probé: div.form-item .filefield-element .widget-edit { max-width: 99%! Important; } – moondog

Para aclarar, creo que el problema puede ser específico de "ancho máximo". El ancho máximo más restrictivo se usa (aparentemente), incluso si un ancho máximo menos restrictivo tiene precedencia. – moondog

Utilice JavaScript para establecer max-width en none primero, luego reasigne un nuevo valor.

Fuente

2012-03-18 22:02:39 chris

CSS: cómo reemplazar el valor máximo de ancho con un valor mayor (menos restrictivo)

Respuesta

Cuestiones relacionadas