¿Cómo puedo anular la información de estilo de una clase CSS en el cuerpo de una página?

Así que estoy trabajando en un proyecto que acepta HTML como entradas y las devuelve como salidas. Todos los HTML que obtengo como entradas tienen todo su texto en divs y hojas de estilo que dictan el estilo para cada div en función del atributo de clase.¿Cómo puedo anular la información de estilo de una clase CSS en el cuerpo de una página?

Para visualizar mejor las cosas, y para ver cómo se está desarrollando mi proyecto, me encantaría generar los colores HTML de entrada codificados según las especificaciones que les doy. Es realmente fácil para mí modificar el cuerpo del HTML, pero es difícil lidiar con la hoja de estilos. Todo lo que estoy buscando es algo simple para anular la propiedad de color de la hoja de estilos. Puede ser hacky, ya que es solo un código interno para uso temporal. Solo quiero algo simple que funcione. ¿Hay alguna manera fácil de anular aspectos de las clases de CSS en el cuerpo de un archivo?

[EDIT] Quiero dar un ejemplo para explicar mejor lo que estoy buscando. Un ejemplo de las hojas de estilo que tengo en la parte superior de mi página (que quiero para anular) es:

.style21{vertical-align:top;font-size:13px;font-family:Helvetica;color:#000000;}

un ejemplo de un div cuyo color me gustaría cambiar es:

<div style="position:absolute;top:432;left:422;color:#ff0000;"><span class="style21">relating to</span></div>

Mi problema es que no puedo anular el color especificado en el CSS. Como puede ver en el ejemplo anterior, estoy tratando de hacerlo en el estilo específico dentro del div, pero eso no está funcionando. [/ EDIT]

Fuente

2011-03-21 Eli

O bien utilizar el atributo de estilo CSS en línea para agregar en su divs, por ejemplo .:

<div style="color:red"> ... </div>

...o cree su propia hoja de estilo y haga referencia a ella después de la hoja de estilo existente, entonces su hoja de estilo debe tener prioridad.

... o agregue un elemento <style> en el <head> de su HTML con el CSS que necesita, esto tendrá prioridad sobre una hoja de estilos externa.

También puede agregar !important después de sus valores de estilo para anular otros estilos en el mismo elemento.

actualización

Usar una de mis sugerencias anteriores y orientar el lapso de style21 clase, en lugar de la div que contiene. El estilo que está aplicando en el div que contiene no será heredado por el lapso, ya que su color se establece en la hoja de estilos.

Fuente

2011-03-21 19:10:38 Graham

La actualización de hecho todo el trabajo para mí Gracias – Eli

gracias yo no sabía que el estilo en línea tiene más preferencia – Faizan

se puede probar un color escribiendo la línea CSS como <div style="color:red";>...</div>

Fuente

2011-03-21 19:00:56 Hussein

Gracias por el consejo. Esto es lo que probé originalmente, pero no parece anular el CSS, que es lo que me llevó a publicar aquí. ¿Alguna otra idea? – Eli

@eli, la respuesta que aceptó es la respuesta que proporcioné primero. Que pasó. – Hussein

@Hussein, supongo que es porque respondí su pregunta ;-) – Graham

Usted puede poner CSS en el head del archivo HTML, y tendrá prioridad sobre una clase en una hoja de estilo incluida.

<style> 
.thing{ 
    color: #f00; 
} 
</style>

Fuente

2011-03-21 19:01:58

¿Has probado a usar la bandera! Important en el estilo? ! important le permite decidir qué estilo ganará. También tenga en cuenta! Importante también anulará los estilos en línea.

#example p { 
    color: blue !important; 
} 
... 
#example p { 
    color: red; 
}

otra pareja sugerencias:

Añadir un lapso en el interior de la corriente. El más interno ganará. Aunque esto podría ponerse bastante feo.

<span class="style21"> 
<span style="position:absolute;top:432px;left:422px; color:Red" >relating to</span> 
</span>

jQuery es también una opción. La biblioteca jQuery inyectará el atributo de estilo en el elemento específico.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript" ></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("span").css("color", "#ff0000"); 
     }); 

    </script>

Espero que esto ayude. CSS puede ser bastante frustrante a veces.

Fuente

2011-03-21 19:02:50

Probado. No funcionó :( – Eli

¿Se puede colocar los estilos en el interior del elemento que desea anular como opuesta a envolviéndolos en otro elemento? Acabo recreado el ejemplo anterior y el indicador! Importante que no iba a funcionar, pero añadiendo el estilo directamente en el lapso . etiqueta hace.! –

si puede acceder a la cabeza añadir <style> /*...some style */ </style> la forma Hussein se mostró
y el ultra hacky <style> </style> en el html que va a funcionar, pero su fea. o Javascript que la mejor manera si se puede usar en caso de que

Fuente

2011-03-21 19:05:49 webLacky3rdClass

Eli, es importante recordar que en css la especificidad es muy útil. Si su css en línea está usando! Important y no está anulando las reglas de hojas de estilo importadas, entonces observe de cerca el código usando una herramienta como 'firebug' para firefox. Le mostrará el CSS que se aplica a su elemento. Si hay un error de sintaxis, Firebug le mostrará en el panel de advertencia que ha descartado la declaración.

Recuerde también que, en general, una identificación es más específica que una clase es más específica que un elemento.

Espero que ayude.

-Rick

Fuente

2011-03-21 19:31:31 dolbysurnd

Id de ser antes de classnames.
La etiqueta attribue 'style =' es anterior a los selectores de CSS.
!important palabra es anterior a las dos primeras reglas.
Los selectores de CSS más específicos son menos específicos. Se aplicará más específico.

por ejemplo:

.divclass .spanclass es más específica que .spanclass
.divclass.divclass es más específico que .divclass
#divId .spanclass tiene ID Es por eso que es más específico que .divClass .spanClass
<div id="someDiv" style="color:red;"> tiene atributo y late #someDiv{color:blue}
estilo: #someDiv{color:blue!important} se aplicará sobre el atributo style="color:red"

Fuente

2011-03-21 19:46:50 Johnner

Nunca pensé que este ¡también afecta a la solicitud de estilo de estilo! – Daria

¿Cómo puedo anular la información de estilo de una clase CSS en el cuerpo de una página?

Respuesta

Cuestiones relacionadas