Hice un sitio usando archivos CSS separados y ahora quiero combinarlos. El problema es que no puedo simplemente copiar / pegar todo en 1 archivo porque mis consultas multimedia tienen valores diferentes para html, h1, h2, h3.

¿Hay alguna manera de hacer que las consultas de medios especifiquen una página para que solo seleccione el html y h1 de la página de inicio, sin cambiar el html y h1 de la página de contacto?

Editar: esto es para una plantilla personalizada de Wordpress, por lo que todas las páginas compartirán el mismo encabezado y la misma etiqueta de apertura html.

Ejemplo:

¿Cómo combinaría estos dos archivos?

Index.css:

html {
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

@media only screen and (min-device-width: 700px) {
    html {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }
}

Contact.css:

html {
    font-size: 18px;
}

h1 {
    font-size: 1rem;
}

@media only screen and (min-device-width: 700px) {
    html {
        font-size: 19px;
    }
    h1 {
        font-size: 1.5rem;
    }
}
1
Calisto 23 dic. 2016 a las 23:48

3 respuestas

La mejor respuesta

Dale una clase a esa página específica como esta:

<html class="specific-page">

Y en el CSS:

@media only screen and (min-device-width: 700px) {
    html.specific-page {
        font-size: 19px;
    }
    .specific-page h1 {
        font-size: 1.5rem;
    }
}

O:

  1. Agregue esto <link /> solo a esa página específica.
  2. O como una etiqueta <style> en esa página específica.
4
Praveen Kumar Purushothaman 23 dic. 2016 a las 20:52

La mayoría de las páginas de WordPress tienen una clase como -> .page-id-12345 - donde 12345 es único para esa página y no cambia. Las páginas que no contienen esta clase muy distintiva pero tendrán (o deberían) tener una clase definida que lo identifique de forma única, p. La página de resultados de búsqueda de Geodirectory tiene una clase de nivel superior denominada ".search-results".

0
Stephen Rauch 12 ago. 2018 a las 03:23

Puede usar la clase body si aún no se usa en su tema: https://developer.wordpress.org/reference/functions/body_class/

Esto agregará automáticamente clases específicas para la página de inicio, publicaciones, archivos, etc. Luego, puede tener un conjunto de reglas CSS que se usan globalmente, y después de eso, puede definir todos los estilos específicos de las otras páginas.

body {
    font-size: 16px;
}
h1 {
    font-size: 1.5rem;
}

body.class-name {
    font-size: 18px;
}
h1.class-name {
    font-size: 1rem;
}

@media only screen and (min-device-width: 700px) {
    body {
        font-size: 17px;
    }
    h1 {
        font-size: 2rem;
    }

    html.class-name {
        font-size: 19px;
    }
    h1.class-name {
        font-size: 1.5rem;
    }
}
1
nezhar 23 dic. 2016 a las 21:35