rimuovere/ripristinare il css ereditato da un elemento

Question

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

Sto costruendo e script incorporato 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.

ad esempio:

div{ 
    background-color:red; 
} 

quindi se non impostare qualsiasi colore di sfondo al mio div, mostrerà rosso, anche se io non voglio questo.

Le uniche soluzioni che seguo è quella di sovrascrivere tutte le proprietà del css, in questo modo il mio div mostrerà esattamente quello che voglio. Il problema con questa soluzione è che ci sono troppe proprietà CSS da sovrascrivere e voglio che il mio script sia il più leggero possibile.

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

Grazie

Answer 1

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

Se il proprio div è una sorta di "widget" che può essere incluso in altri siti, è possibile 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.

Answer 2

Un approccio semplice sarebbe utilizzare il modificatore !important in css, ma questo può essere sovrascritto allo stesso modo dagli utenti.

Forse una soluzione può essere raggiunta con jquery attraversando l'intero DOM per trovare le classi (ri) definite e rimuovere/forzare gli stili CSS.

Answer 3

Fintanto che sono attributi come classi e ID, è possibile rimuoverli con i modificatori di classe javascript/jQuery.

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

Non esiste alcun modo per rimuovere specifici tag CSS diversi da ignorarli (o utilizzare un altro elemento).

Answer 4

Provare questo: creare un semplice div senza alcuno stile o contenuto al di fuori del rosso div. Ora è possibile utilizzare un ciclo su tutti gli stili del piano div e assegnare quindi al proprio interno div per ripristinare tutti gli stili.

Ovviamente questo non funziona se qualcuno assegna gli stili a tutti gli div s (vale a dire senza usare una classe. Il CSS sarebbe div { ... }).

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

Answer 5

Impostare solo le proprietà CSS rilevanti/importanti.

Esempio (solo cambiare gli attributi che possono causare il div a guardare 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; 

scegliere un selettore molto specifico, come ad esempio 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.

Answer 6

Si potrebbe provare a sovrascrivere il CSS e utilizzare auto

Non penso che questo funzionerà con il colore specifico, ma mi sono imbattuto in un problema in cui ho avuto una proprietà padre, ad esempio

.parent { 
    left: 0px; 
} 

e poi sono riuscito a definire mio figlio con qualcosa come

.child { 
    left: auto; 
} 

ed effettivamente "resettare" la proprietà.

Answer 7

è possibile utilizzare questa opzione di seguito.

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

ora, se il loro qualsiasi luogo in cui non si desidera applicare lo stile di default è possibile utilizzare la classe 'no_common_style' di classe. es:

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

Answer 8

Da quello che ho capito che si desidera utilizzare un div che eredita da nessuna classe, ma la 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; }