paginas - ¿Puede un archivo CSS tener prioridad sobre otro archivo CSS?

etiquetas css

Question

Estoy en Londres trabajando en una aplicación, y el chico html / css está en Nueva York. Me envía actualizaciones diarias por correo electrónico ya que no tenemos configuración de control de fuente que ambos podamos usar, constantemente hago pequeños cambios en su CSS, así que cada vez que obtengo un nuevo archivo de él, tengo que volver a aplicar todos mis cambios y, obviamente, cuanto más trabajo hago, más tiempo me tomará cada vez.

Tuve la idea de crear mi propia hoja de estilo separada, pero ¿hay alguna manera de decirle al navegador que dé mayor prioridad a mi hoja de cálculo y sobrescribir cualquiera de sus estilos que tengan el mismo nombre de clase y atributos?

Este no será un sitio público, por lo que solo respaldaremos los últimos navegadores.

Answer 1

Depende de cómo los configure en su encabezado. Entonces algo como esto funcionará:

<link rel="old stylesheet" href="path/to/style.css" />
<link rel="newer stylesheet" href="path/to/style.css" />
<link rel="newest stylesheet" href="path/to/style.css" />

El último será recogido.

Y un enlace útil sobre las hojas de estilo aquí: http://www.w3.org/TR/html401/present/styles.html#h-14.3.2

Ver también: Precedencia en CSS si lo anterior no funciona para usted.

Espero que esté claro.

Answer 2

En algún lugar he leído que no se trata de qué archivo CSS se llama antes o después, sino que se carga primero. Por ejemplo, si su primer archivo CSS es lo suficientemente largo para seguir cargando mientras que el que está debajo (que por teoría básica debería tener mayor prioridad) ya está cargado, estas líneas cargadas después tendrán mayor prioridad. ¡Es complicado, pero debemos ser conscientes de ello ! La técnica con especificidad me parece legítima. Por lo tanto, cuanto más específico (#someid .someclass div más que .someclass div) la mayor prioridad.

Answer 3

Encontré una publicación aquí en . Pensé que podría ayudarte.

Una forma eficiente de fusionar 2 grandes archivos CSS

Si está buscando realmente fusionar sus archivos, entonces esto será útil, supongo.

Especificar el CSS de una manera más específica también lo ayudará.

me gusta:

td.classname{}
table.classname{}

Answer 4

Funciona así:

<link rel="stylesheet" type="text/css" href="first-style.css">
<link rel="stylesheet" type="text/css" href="second-style.css">

second-style.css:

@import ''third-style.css'';

El último estilo importado es el que todas las reglas se adhieren. Por ejemplo:

first-style.css:

body{
    size:200%;
    color:red;
}

second-style.css:

@import ''third-style.css'';
p{
    color:red;
}

third-style.css:

p{
    color:green;
    size:10%
}

Los estilos resultantes serían:

body{
    size:200%;
    color:red;
}
p{
    color:green;
    size:10%

Nota: si agrega reglas importantes, es diferente. Por ejemplo:

first-style.css:

body{
    size:200% !important;
    color:red !important;
}

second-style.css:

@import ''third-style.css'';
p{
    color:red;
}

third-style.css:

p{
    color:green;
    size:10%
}

El resultado sería:

body{
    size:200% !important;
    color:red !important;
}

¡Espero que esto ayude!

Answer 5

Las reglas de CSS se aplican secuencialmente. Entonces, todo lo que tiene que hacer es incluir su CSS por última vez, después de todos los demás.

Answer 6

Las reglas de Css son secuenciales, debes hacer dos cosas en tus archivos html

1. Incluye tu CSS como el último css
2. Agregue! Importante en todos los atributos de css en su archivo CSS. Eg: position : absolute !important;

eso debería servir para tu propósito

Answer 7

Yo personalmente desaconsejo estrictamente el uso! Importante. Aprende lo que es realmente importante de here .

Usted debe saber:

.some-class .some-div a {
    color:red;
}

Siempre es más importante que (el orden de aparición no tiene importancia en este caso):

.some-class a {
    color:blue;
}

Si tiene (dos declaraciones con el mismo nivel):

.some-class .some-div a {
    color:red;
}

.some-class .some-div a {
    color:blue;
}

Se usa una declaración posterior. Lo mismo ocurre con los archivos incluidos en la etiqueta principal como escribió @Kees Sonnema.

Answer 8

Yo uso la regla de prioridad de CSS de la siguiente manera:

1. Primera regla como css en línea con html que marcará cualquier tipo de css.

2. Segunda regla como la palabra clave uso! Importante en la declaración css después del valor.

3. Tercera regla como el orden de prioridad del enlace de la hoja de estilos del encabezado html (hoja de estilo CSS principal después de la hoja de estilo CSS personalizada).

Básicamente, el usuario desea usar la tercera regla y también desea marchar el bootstrap css con el CSS personalizado, ejemplo a continuación:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   

<!-- App Custom CSS -->
<link rel="stylesheet" href="assets/css/custom-style.css">