Guiones de contenido CSS no sobrescribe el original

Mi problema es que quiero modificar un estilo de un sitio con mi configuración personalizada. Intenté con Content Scripts, pero este trabajo dosent, porque no pueden sobrescribir los archivos css originales. Aquí es un ejemplo:Guiones de contenido CSS no sobrescribe el original

foo/manifest.json

{ 
    "name": "test", 
    "version": "1.0", 
    "content_scripts": [ 
    { 
     "matches": ["file://*/*test.html"], 
     "css": ["main.css"] 
    } 
    ] 
}

foo/main.css

body { 
    background: #0f0; 
}

test.html

<html> 
    <head> 
    <title>foobar</title> 
    </head> 

    <body style="background:#f00;"> 

    </body> 
</html>

Entonces i loaded la foo la extensión carpeta en mi Google Chrome, y abrió el test.html pero el color de fondo sigue siendo rojo. Inspeccioné el elemento y vi que:

Estilo Elemento

body {
background: #f00;
}

de usuario de estilo

body {
~~background: #0f0;~~
}

¿Cómo puedo modificar un archivo CSS existente con mi css personalizado con secuencias de comandos de contenido?
Si esto no es posible, ¿cómo puedo modificar automáticamente un CSS existente con mi personalización cuando la página se carga especialmente en google chrome?

Fuente

2011-05-20 Gergely Fehérvári

Una regla de estilo en línea tiene un precedente más alto que cualquier regla importada de una hoja de estilo. Se podría utilizar la directiva !important subvertir este comportamiento:

body { 
    background: #0f0 !important; 
}

Fuente

2011-05-20 20:57:41

uso de JavaScript, añada un ID de la etiqueta de cuerpo, o alguna otra etiqueta que abarca todo. A continuación, puede hacer esto:

// original rule 
.someclass li a{ 
    color: blue; 
}

// your rule 
#cool-extension .someclass li a{ 
    color: red; 
}

Si utiliza el selector original completo, y anteponga su identificación, la regla siempre tendrá prioridad.

Fuente

2013-05-03 19:18:42 CocaLeaf

Guiones de contenido CSS no sobrescribe el original

Respuesta

Cuestiones relacionadas