it-swarm.it

rimuovere/ripristinare i css ereditati da un elemento

So che questa domanda è stata posta prima, ma prima di contrassegnarla come un duplicato, voglio dirti che la mia situazione è leggermente diversa da quella che ho trovato su Internet.

Sto costruendo e inserendo script che le persone possono inserire nei loro siti. Questo script crea un div con una certa larghezza/altezza e alcune informazioni in esso.

Il mio problema è che alcuni siti Web dichiarano stili per div che sono ereditati anche dal mio div.

per esempio:

div{
    background-color:red;
}

quindi se non applico alcun colore di sfondo al mio div, esso mostrerà il rosso anche se non lo voglio.

L'unica soluzione che ho trovato è quella di sovrascrivere il maggior numero di proprietà del css, in questo modo il mio div mostrerà esattamente come voglio .. Il problema con questa soluzione è che ci sono troppe proprietà CSS da sovrascrivere e voglio che il mio script sia leggero come può essere.

Quindi la mia domanda è se si conosce un'altra soluzione al mio problema . Può essere in css/javascript/jQuery.

Grazie

29
Doua Beri

"resettare" gli stili per un elemento specifico non è possibile, dovrai sovrascrivere tutti gli stili che non vuoi/servono. se lo fai con css direttamente o usando jquery per applicare gli stili dipende da cosa è più facile per te (ma non mi raccomanderò di usare javascript/jquery per questo, dato che è completamente inutile).

Se il tuo div è una sorta di "widget" che può essere incluso in altri siti, puoi provare a inserirlo in un iframe . questo "resetterà" gli stili, perché il suo contenuto è un altro documento, ma forse questo influenza il modo in cui il tuo widget funziona (o forse lo interrompe completamente), quindi questo potrebbe non essere possibile nel tuo caso.

17
oezi

Imposta solo le proprietà CSS rilevanti/importanti.

Esempio (cambia solo gli attributi che potrebbero far sembrare il tuo div completamente diverso):

background: #FFF;
border: none;
color: #000;
display: block;
font: initial;
height: auto;
letter-spacing: normal;
line-height: normal;
margin: 0;
padding: 0;
text-transform: none;
visibility: visible;
width: auto;
Word-spacing: normal;
z-index: auto;

Scegli un selettore molto specifico, come div#donttouchme, <div id="donttouchme"></div>. Inoltre, è possibile aggiungere `! Important prima di ogni punto e virgola nella dichiarazione. I tuoi clienti stanno deliberatamente cercando di rovinare il tuo lay-out quando questa opzione fallisce.

11
Rob W

Potresti provare a sovrascrivere il CSS e usare l'auto

Non penso che funzionerà in modo specifico con il colore, ma mi sono imbattuto in un problema in cui avevo una proprietà genitore come

.parent {
   left: 0px;
}

e poi sono riuscito a definire mio figlio con qualcosa di simile

.child {
   left: auto;
}

ed effettivamente "resetta" la proprietà.

7
Seth

Prova questo: crea un div semplice senza alcuno stile o contenuto al di fuori del div rosso. Ora puoi usare un ciclo su tutti gli stili di plain div e assegnare poi al tuo div interno per resettare tutti gli stili.

Ovviamente questo non funziona se qualcuno assegna stili a tutti divs (cioè senza usare una classe. CSS sarebbe div { ... }).

La solita soluzione per problemi come questo è di dare a div una classe distinta. In questo modo, i web designer dei siti possono regolare lo stile del tuo div per adattarlo al resto del design.

1
Aaron Digulla

Da quello che capisco tu vuoi usare un div che eredita da nessuna classe ma dalla tua. Come menzionato nella risposta precedente, non è possibile ripristinare completamente un'ereditarietà div. Tuttavia, ciò che ha funzionato per me con questo problema è stato quello di utilizzare un altro elemento, uno non frequente e certamente non utilizzato nella pagina html corrente. Un buon esempio, è quello di usare invece di personalizzarlo per assomigliare a quello che sarebbe il tuo ideale.

area { background-color : red; }

puoi usare questa opzione qui sotto.

<style>
  div:not(.no_common_style){
      background-color:red;
  }
</style>

ora, se hanno un posto dove non vuoi applicare lo stile di default puoi usare la classe 'no_common_style' come class . ex:

<div class="no_common_style">
  It will not display in red
</div>
0
bharatpatel

Finché sono attributi come classi e id puoi rimuoverli con i modificatori di classe javascript/jQuery.

document.getElementById("MyElement").className = "";

Non c'è modo di rimuovere specifici tag CSS diversi dall'overrimarli (o usare un altro elemento).

0
AlexBay