Estilos de Consulta de Medios Que No Anulan Estilos Originales

Estoy intentando usar algunas consultas de medios para un sitio web que estoy construyendo. El problema que estoy teniendo, sin embargo, es que mientras que los estilos de consulta de medios están siendo aplicados, están siendo anulados. No puedo decir por qué porque estoy usando exactamente los mismos selectores. ¿Alguien puede señalar algo que no estoy viendo?

CSS ORIGINAL

#global-wrapper-outer > #global-wrapper-inner {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
    #global-wrapper-outer > #global-wrapper-inner > nav {
        background: #fff;
        padding-bottom: 20px;
        box-shadow: 0 4px 2px -2px gray;
    }

MEDIA QUERY CSS 

@media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

La segunda consulta de medios está funcionando bien, donde configuré el nav para tener un visualización de ninguno. Sin embargo, cuando intento establecer el ancho de #global-wrapper-inner al 100% no se aplica. Puedo ver el estilo "aplicado" cuando presiono F12 y selecciono ese elemento. Sin embargo, el estilo en sí está tachado y no en realidad aplicado y todavía tiene el ancho original del 85%.

Author: Ben Black, 2013-09-27
Source

4 answers

Los selectores en su CSS original tienen la misma especificidad que los selectores dentro de sus media queries (las primeras declaraciones también están dirigidas a la misma propiedad - width) y debido a que el conjunto de reglas de media query está siendo sobrescrito, voy a suponer que aparece antes de el conjunto de reglas original.

El segundo selector de consulta de medios funciona porque está dirigido a una propiedad que no se estableció en su CSS original, por lo que la especificidad no es relevante.

Tener el primer selector de consulta de medios tiene prioridad, anteponga un elemento antepasado a él: 

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}
 70
Author: Adrift,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-04-05 12:45:26

He estado al menos 2 horas tratando de encontrar el problema de sobrescritura CSS hasta que encontré que mis comentarios de línea estaban mal... Y la segunda definición de CSS no funcionaba:

Así que, ¡no seas tan estúpido como yo !:

/* LITTLE SCREENS */ 

@media screen and (max-width: 990px) {
    ... whatever ...
}

/*  BIG SCREENS */ 

@media screen and (min-width: 990px) {
    ... whatever more ...
}

Nunca use: Double bar como lo hice:

// This is not a comment in CSS!

/* This is a comment in CSS! */
 1
Author: gtamborero,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-24 21:05:29

Debe vincular el archivo de consulta de medios (consultas.css) más tarde que el archivo css normal (estilo.css). De esa manera las reglas en las consultas.css anulará aquellos en estilo.css.

 0
Author: Sameer Khanal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-13 07:08:13

¿Qué hay de usar !important? Si usted va a su consulta de medios de ( min-width: 176px ) y ( max-width: 736px ) o incluso hasta 980px?

 0
Author: Jamie JKMedia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-18 18:54:55