Cómo evitar que mi propiedad se sobrescriba en CSS

Parece que tienes un valor de color declarado dos veces para la misma clase (.site-title). Estoy adivinando que estos están en 2 lugares / documentos diferentes? ¿Parece que uno está en un archivo CSS y el otro está en otra parte de su sitio web? Si ese es el caso, el de su sitio web anulará el de su documento style.css porque se lee en último lugar.

Entonces, por ejemplo, su sitio web se cargará, lea el documento “style.css”, establezca el color como # 00FFFF … luego llegará a donde tenga el color declarado nuevamente para la misma clase (ligne 47), y dirá, “¡Oh hola! Este es el conjunto de colores más reciente para la clase, ¡lo utilizaremos en su lugar!

No estoy seguro de dónde se ubicaría el ligne 47, pero si se deshace de eso, dejará de anularlo.

Punta de bonificación:

Aquí está el orden en que el navegador lee el código CSS:

1. El documento style.css.
2. El documento HTML (si tiene algún estilo declarado en el encabezado del HTML)
3. “En línea”. Entonces, por ejemplo, estoy escribiendo una publicación de blog y solo quiero resaltar una cierta parte de una oración. Así que escribo el CSS en la línea (en línea) en lugar de agregarlo a style.css.

Pero el # 3 cambiará cualquier cosa escrita en el # 1 porque se considera (por falta de recordar el término apropiado) más reciente.

Entonces, si declara un color en el documento style.css, luego declara lo mismo más abajo en la jerarquía de “cascada”, anulará esa primera declaración, principalmente porque cree que lo desea.

Si puede eliminar la declaración “ligne 47”, hágalo.

¿Cómo evito que mi propiedad se sobrescriba en CSS?

Usted hace su regla más específica que la otra regla, por uno de:

1. use un selector con una prioridad más alta, como una ID en lugar de una clase, por ejemplo, #my-cool-link (debe agregarlo al HTML para que coincida)
2. Escríbalo en línea en el HTML en lugar de hacerlo en un archivo CSS, por ejemplo,
3. utilice selectores más o más específicos, por ejemplo, body .site-title a , o .site-title > a
4. use el modificador! important, es decir, el color: #0a0a0a !important;
5. o simplemente elimine el color: #00ffff; antiguo color: #00ffff; línea desde el archivo CSS.

1 y 2 requieren que edites el HTML. Si no puedes hacer eso, están fuera.

En general, 4 es una mala práctica: es un indicio de que, en primer lugar, has hecho mal tu CSS.

3 y 5 son tus mejores opciones.

En el código que veo, hay una regla en línea que reemplaza a su regla externa de css. Si no puede eliminar su regla en línea css. Utilice! Regla importante.

Color: # 0a0a0a importante;

Siempre debemos evitar las reglas importantes.

Para asegurarse de que su estilo no se anule por ninguna otra regla de CSS, simplemente agregue ! Importante a su propia hoja de estilo.

.site-title a {
color: # 00ffff! importante;
texto-decoración: ninguno;
}

Cambie la línea en su archivo style.css a:

color: # ff0000! importante;