html - usado - quitar estilos de un div

Use un nuevo archivo CSS para anular el CSS del sitio web actual

Question

Actualmente, mi sitio web tiene 3 archivos CSS que se incluyen automáticamente como parte del sitio web y no tengo acceso a la fuente, es decir, index.html del sitio web, pero sí tengo acceso a los archivos CSS de mi sitio web.

Estoy tratando de usar mi propio estilo para anular los archivos CSS de mis sitios web y crear un nuevo archivo CSS que contenga todo el estilo que me gustaría sobrescribir en mi sitio web.

He intentado usar @import url(css4.css) y lo he colocado en la parte superior de mi último archivo CSS, pero eso no sobrescribiría el estilo del último archivo CSS.

¿Cómo puedo conseguir esto?

<link rel="stylesheet" type="text/css" href="currentCSS1.css">
<link rel="stylesheet" type="text/css" href="currentCSS2.css">
<link rel="stylesheet" type="text/css" href="currentCSS3.css">   
<!-- How to add this below just by using CSS? -->
<link rel="stylesheet" type="text/css" href="newCSS4.css"> 

Answer 1

Una alternativa: confiar en la cascada, en lugar de la especificidad.

Algunas soluciones aquí recomiendan usar @import para incluir su archivo css4.css y luego modificar los selectores para tener una mayor especificidad o para usar la declaración !important , pero hay otra manera.

Pegue todo el contenido de css4.css al final de css3.css . De esta manera, no necesita confiar en la !important o especificidad, ya que la herencia en cascada adoptará sus reglas al final del archivo si son de la misma especificidad.

Con este método, estás sacrificando la modularidad para una implementación más fácil.

Ejemplo de pegado, confiando en cascada:

/* Contents of css3.css */
.mycooldiv {
    font: bold 1.2em sans-serif;
    color: tomato;
}

/* Pasted contents of css4.css */
.mycooldiv {
    color: lime;
}

<div class="mycooldiv">Hello World</div>

Sin embargo, sería bastante fácil crear una mayor especificidad simplemente añadiendo html al comienzo de cada regla en css4.css , si no desea pegarlo al final de css3.css . Esto es preferible a agregar !important donde funciona.

Ejemplo de importación, apoyándose en mayor especificidad:

/* @import of css4.css with greater specificity */
html .mycooldiv {
    color: lime;
}

/* Contents of css3.css */
.mycooldiv {
    font: bold 1.2em sans-serif;
    color: tomato;
}

<div class="mycooldiv">Hello World</div>

Answer 2

Además de usar !important que la mayoría de las respuestas le recomiendan usar, esta es una cuestión de especificidad de CSS

El concepto

La especificidad es el medio por el cual un navegador decide qué valores de propiedad son los más relevantes para un elemento y se aplica. La especificidad solo se basa en las reglas de coincidencia que están compuestas por selectores de diferentes tipos.

¿Cómo se calcula?

La especificidad se calcula sobre la concatenación del recuento de cada tipo de selectores. Es un peso que se aplica a la expresión correspondiente correspondiente.

En caso de igualdad de especificidad, la última declaración encontrada en el CSS se aplica al elemento.

Algunas reglas de oro

• Nunca use! Important en el sitio css.
• Solo use! Important en el css específico de la página que reemplaza al css externo o de todo el sitio (por ejemplo, de ExtJs o YUI).
• Nunca use! Important cuando esté escribiendo un plugin / mashup.
• ¡Siempre busque una manera de utilizar la especificidad antes de siquiera considerar! Importante

Se puede representar por 4 columnas de prioridad:

en línea = 1 | 0 | 0 | 0

id = 0 | 1 | 0 | 0

clase = 0 | 0 | 1 | 0

elemento = 0 | 0 | 0 | 1

De izquierda a derecha, el número más alto tiene prioridad.

Aquí hay un fragmento con un ejemplo completo de una especificidad de CSS

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY 0/1/0/0 */
#id {
  background-color: green/*going to be green - overridden by style yellow */
}

/* SPECIFICITY  0/0/1/0 */
.class {
  background-color: yellow /*going to be yellow - overridden by style blue */
}

/* SPECIFICITY  0/0/0/1 */
section {
  background-color: blue /*going to be blue - overridden by style red */
}
  
/* ------------ just to remove inline demo ----------- */

/*now remove background for inline elements we should
use !important and a parent in order to make it more specific

/* SPECIFICITY  1/0/0/1 */

section > div {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
          <!--SPECIFICITY 1/0/0/0 - overridden by style purple -->
        </div>
      </section>
    </div>
  </div>
</article>

Ahora aquí está el fragmento completo paso a paso

ID: VERDE

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY 0/1/0/0 */
#id {
  background-color: green
}
   

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>             
        </div>
      </section>
    </div>
  </div>
</article>

CLASE: AMARILLO

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/1/0 */
.class {
  background-color: yellow
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

ELEMENTO: AZUL

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/0/1 */
section {
  background-color: blue
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

ESTILO EN LINEA: ROJO

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

 

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

ESTILO EN LÍNEA ANCHADO: PÚRPURA

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */

/* SPECIFICITY  1/0/0/1 */

section > div {
  background-color: purple !IMPORTANT
}

 

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

Puedes calcular la especificidad de tu (s) elemento (s) here

Nota:

Una lectura obligada sobre este tema.

• Herencia y cascada
• Especificidad CSS
• Específicos sobre la especificidad de CSS

Answer 3

Aquí hay una solución divertida que nadie ha mencionado.

Hechos:

1. No puede modificar el HTML de la página en absoluto, ¡ no hay problema!

2. Puede modificar los archivos CSS, pero los desarrolladores pueden modificarlos nuevamente más tarde y eliminar cualquier cambio que haya realizado, lo cual no es una preocupación.

3. No puedes / no quieres usar Javascript y JQuery - bien por mí.

4. Puede agregar más archivos al servidor - ¡Excelente!

¡Hagamos un poco de pirateo .htacess por diversión y beneficio!

Archivo raíz .htaccess del documento:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

Resultado: hackedCSS3.php se sirve silenciosamente en lugar de css3.css en cada solicitud.

REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html

Archivo hackedCSS3.php:

<?php

// Send the right header information!
header("Content-type: text/css; charset: UTF-8");

// Output the css3.css file
echo file_get_contents("css3.css");
?>

// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }

Prima:

Puede expandir esta solución para incluir los tres archivos .css en este archivo .php (pero solo debe servir, por ejemplo, css3.css y enviar los archivos css1.css y css2.css a un agujero negro con .htaccess ), y usar inteligentemente expresiones regulares para eliminar / modificar el CSS de esos desarrolladores sin tocar ninguno de sus archivos. Las posibilidades son tentadoras.

Apéndice:

¿Puedes ser un poco más específico sobre dónde incluir estos archivos?

El archivo .htaccess debe estar en el directorio raíz del documento del sitio web. Aquí es donde www.example.com/index.html cargaría index.html

¿Debe el archivo hackedCSS3.php estar en el mismo directorio que los otros archivos css?

Puede estar en cualquier directorio que especifique en el archivo .htaccess. La raíz del documento está bien. Cambio

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

a

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]

¿Debería nuestro contenido css (donde especificó // Agregar su CSS aquí ...) debería estar dentro de las etiquetas de estilo html?

No. Trate su código CSS en esa sección como si fuera un archivo .css. No necesitas etiquetas <style> .

Answer 4

Creo que tengo una respuesta. La forma en que he tratado de lograr esto es:

1) Diga que mi css3 es el último CSS de la lista y tengo todos mis cambios en css4. He hecho una copia de css3 y la llamé " css3-Original.css " y agregué mi css4 en la misma carpeta. Luego creé otro archivo css llamado " css3.css " (porque ese es el último que toma de la lista) y agregué las importaciones de mi css3 original primero y luego mi archivo css4.css principal como se indica a continuación:

css3.css (el nuevo)

@import url("css3-Original.css")
@import url("css4.css")

Esta es la mejor manera en que lo encontré para trabajar. De esta manera, aunque sé que mi archivo css3.css cambiará en las actualizaciones, pero sé cómo puedo reemplazarlo muy fácil y rápidamente. He usado! Important en mi css4.css donde sea necesario (si es necesario) pero básicamente porque es el último archivo css, usa ese estilo en comparación con los anteriores (a menos que sean! Importantes).

Gracias por las sugerencias chicos. Finalmente logré llegar a una solución.

Answer 5

Desafortunadamente, tengo que estar de acuerdo con Phari .

Citar:

1) No puede modificar el HTML de la página y, por lo tanto, no puede incluir otro archivo CSS. 2) Puedes modificar los archivos CSS, pero los desarrolladores pueden modificarlos nuevamente más tarde y eliminar cualquier cambio que hayas realizado. Por lo tanto, no puede modificar permanentemente los archivos CSS. 3) No puedes / no quieres usar Javascript y JQuery). Si todas estas cosas son ciertas, no hay solución para su problema.

Comentado por phari el 26 de marzo a las 14:29

Déjame descomponerlo. Haré todo lo posible para explicar por qué no hay una solución (corríjame si me equivoco en alguna de estas opciones);

Opción 1: Uso de jQuery o Javascript.
¡No puedes modificar el HTML de la página en absoluto! No desea utilizar jquery ni javascript. Esto significa que todas las respuestas a su pregunta mencionada en esta página que involucran jquery o javascript no se tienen en cuenta. Esto no significa que las respuestas dadas en esta página sean incorrectas . En tu caso no es posible.

Opción2: @import url(css4.css); Su sitio web tiene 3 archivos css que se incluyen automáticamente como parte del sitio web, pero desafortunadamente, NO tiene acceso a NINGUNO de estos archivos css. No puede colocar este fragmento de código en css3.css, o cualquiera de estos archivos. Puede modificar los archivos CSS, pero los desarrolladores pueden modificarlos nuevamente más tarde y eliminar cualquier cambio que haya realizado, lo que significa @import url(css4.css); También se puede quitar. También utilizando @import url(css4.css); sería completamente inútil. Tendrás que colocar @import url(css4.css); al final de css3.css, pero esto no funcionará porque las reglas de importación siempre deben ser las primeras en un documento . Si no me equivoco, ilia (quien comentó el 23 de marzo a las 9:42) significa que el código se puede colocar en cualquier parte del archivo. @import url(css4.css); debe estar en la parte superior. El enlace que ilia proporcionó como "prueba" también especifica que es un requisito colocarlo al principio. Verifique los dos enlaces a continuación. Más información visite http://webdesign.about.com/cs/css/qt/tipcssatimport.htm o https://developer.mozilla.org/en/docs/Web/CSS/@import#Specifications . La opción 2 también se ignora.

No creo que pueda haber otra forma de hacer lo que quieres hacer. Por lo tanto, no hay solución a su problema.

Answer 6

En su nuevo archivo CSS, agregue !important para el bloque de código, por ejemplo:

Si tienes esto en css1.css:

 h2{
 color:#000;
 }

En css4.css ponga el mismo elemento, pero con !important , como sigue;

 h2{
 color:#ccc !important;
 }

Por lo tanto !important obligará a que este estilo sea por todos los medios el estilo establecido para el elemento al que se aplica.

Answer 7

Para definiciones de CSS duplicadas, la última definición tendrá prioridad.

Si realmente se hace referencia al archivo css4.css agregado después de los "3 archivos css que se incluyen automáticamente", entonces las definiciones del archivo css4.css deben reemplazar las definiciones duplicadas anteriores de estos otros archivos.

Si no ve los resultados esperados, use la opción "ver fuente" de su navegador para confirmar la secuencia en la que se hace referencia a los archivos CSS. También use las "Herramientas de desarrollo" del navegador Chrome o el complemento "Firebug" para el navegador Firefox para averiguar cómo el navegador está interpretando las definiciones de CSS para obtener un resultado que no esperaba. Estas herramientas deben proporcionar una visión de su problema.

Answer 8

Para usar solo CSS, la mejor manera sería usar las herramientas de desarrollo de Chrome o FireFox y encontrar los distintos estilos que desea sobrescribir.

Para cada uno de los estilos que necesite ajustar, utilice el modificador !important .

.newClass {
  color:red !important;
}

Otra forma sería escribir nombres de clase css únicos y usarlos de nuevo si es necesario. El verdadero truco aquí está en la especificidad. Si un identificador es más específico, se aplicará la regla.

6.4.1 Orden en cascada

6.4.1.4 Finalmente, ordenar por orden especificado: si dos declaraciones tienen el mismo peso, origen y especificidad, la última especificada gana. Las declaraciones en hojas de estilo importadas se consideran antes que cualquier declaración en la hoja de estilo en sí.

<a class="my-most-awesome-link its-really-cool">Most awesome link</a>

.my-most-awesome-link.its-really-cool {
  text-decoration:none !important;
  color:red !important;
}

Si estás desesperado, puedes usar javascript para eliminar el css no deseado.

Ver este JSBin para un ejemplo de trabajo.

Encontré esta técnica interesante

<script>
function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement);
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
      if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
          allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
      }
    }
}

removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>

Answer 9

Si entiendo que estás haciendo la pregunta correctamente, agregar @import url(css4.css) a la parte superior de css3.css importa tu hoja de estilo en css3.css . Pero sus estilos están siendo anulados por los estilos en css3.css . Esto se debe a la orden y Specificity cascada . Para que se css4.css estilos css4.css , sus selectores deben tener una especificidad más alta que la del selector en css.3.css que está intentando anular.

Ejemplo: <h1> etiquetas serán de color rojo.

body h1 { //this is more specific
   color: blue;
}

h1 { //this is less specific
   color: red;
}

Pero dado que se @import url(css4.css) línea de código @import url(css4.css) cada vez que los desarrolladores actualicen el archivo css3.css , esto no es una "solución a prueba de balas"

¿Tienes la posibilidad de agregar algún javascript al sitio? Si es así podrías usar la siguiente solución

jQuery

$(''head'').append(''<link rel="stylesheet" type="text/css" href="css4.css">'');

Javascript

var head = document.head
  , link = document.createElement(''link'')

link.type = ''text/css''
link.rel = ''stylesheet''
link.href = ''css4.css''

head.appendChild(link)

Fuente: https://.com/a/11833777/2687861

Answer 10

Simplemente puede sobrescribir el texto en el archivo css disponible, el estilo que desea del archivo css anterior, puede copiar ese código en el que puede agregar. Con ese nuevo código, actualizar su sitio web aparece el resultado que necesita

Answer 11

Use @import url(''css4.css'') en una de sus páginas css existentes. Luego use la especificidad para resaltar su nuevo código como se muestra a continuación:

Html:

<ul class=''ulclass''>
 <li class=''liclass''>
  <a class=''aclass>The text</a>
 </li>
</ul>

css1.css:

.aclass{
   color : red;
}

css4.css:

ul.ulclass li.liclass a.aclass{
   color: green;
}

Entonces tendrás color green en tu elemento.

Answer 12

escriba un nuevo css y use la identificación de los elementos en lugar de la clase. También usar! Importante en css.