Yocker
  1. Yocker
  3. Come posso prevenire l’ereditarietà CSS?
Intereting Posts
Parallel.ForEach vs Task.Factory.StartNew Cross browser JavaScript (non jQuery …) scorrere fino all’animazione superiore Quali caratteri sono vietati nei nomi delle directory Windows e Linux? In Java, come posso convalidare un’eccezione generata con JUnit? Script concatenati in ordine con Gulp Pro e contro di RNGCryptoServiceProvider Confusione: @NotNull vs @Column (nullable = false) Come si tracciano grafici a barre in gnuplot? Sottoinsieme di dati per contenere solo colonne i cui nomi corrispondono a una condizione ERRORE 2003 (HY000): imansible connettersi al server MySQL su ‘127.0.0.1’ (111) post incremento operatore java Perché C ++ non consente alle baseline di implementare un’interfaccia ereditata di una class derivata? Come disabilitare un filtro globale in ASP.Net MVC in modo selettivo Come posso ordinare una collezione? Esiste un compilatore R?

Come posso prevenire l’ereditarietà CSS?

Nella mia barra laterale ho un menu di navigazione gerarchico che utilizza elenchi annidati (tag

    e

  • ). Sto usando un tema già creato che ha già degli stili per le voci di elenco, ma voglio modificare lo stile per gli articoli di primo livello ma NON farlo applicare agli elementi secondari. Esiste un modo semplice per applicare gli stili al tag dell’elemento di elenco di livello superiore SENZA avere quegli stili sovrapposti agli elementi dell’elenco dei bambini? Capisco che posso aggiungere esplicitamente gli stili di override agli elementi secondari ma vorrei davvero evitare di dover duplicare tutto il codice di stile se c’è un modo semplice per dire “applicare questi stili a questa class e NON fare cascata giù per gli elementi dei bambini “. Ecco l’html che sto usando:

    Quindi il css ha già gli stili per “#sidebar ul” e “#sidebar ul li”, ma mi piacerebbe aggiungere altri stili a “#sidebar .top-level-nav” che NON si sovrappone ai suoi subchildren. C’è un modo per farlo semplicemente o ho bisogno di riorganizzare tutti gli stili in modo che gli stili che erano su “#sidebar ul” siano ora specifici per certe classi.

    Al momento non ci sono selettori genitori (o come li chiama Shaun Inman , selettori qualificati ), quindi dovrai applicare gli stili agli elementi dell’elenco secondario per sovrascrivere gli stili negli elementi dell’elenco principale.

    La cascata è una sorta di punto focale di Cascading Style Sheets, da cui il nome.

    • O usi il selettore di bambini

    Quindi usando 

     #parent > child

    Rende solo i bambini di primo livello a cui applicare gli stili. Sfortunatamente IE6 non supporta il selettore di figlio.

    Altrimenti puoi usare 

     #parent child child

    Per impostare altri stili specifici per i bambini che sono più di un livello sotto.

    Esiste una proprietà chiamata all nel modulo di ereditarietà CSS3 . Funziona così: 

     #sidebar ul li { all: initial; }

    A partire dal 2016-12, tutti i browser tranne IE / Edge e Opera Mini supportano questa proprietà.

    È ansible utilizzare il selettore * per riportare gli stili figli ai valori predefiniti

    esempio 

     #parent { white-space: pre-wrap; } #parent * { white-space: initial; }

    Il wrapping con iframe rende obsoleto il css padre.

    Risposta breve è: No, non è ansible impedire l’ereditarietà CSS. Puoi solo sostituire gli stili impostati sui genitori. Vedi le specifiche:

    Ogni elemento in un documento HTML erediterà tutte le proprietà ereditabili dal suo genitore eccetto l’elemento radice ( html ), che non ha un genitore. – W3C

    Oltre a scavalcare ogni singola proprietà ereditata. Puoi anche utilizzare initial parola chiave initial , ad es. color: initial; . Può anche essere usato insieme a all , ad es. all: initial; , che resetterà tutte le proprietà contemporaneamente. Esempio: 

     .container { color: blue; font-style: italic; } .initial { all: initial; } 
     
     The quick brown fox jumps over the lazy dog

    Potresti usare qualcosa come jQuery per “disabilitare” questo comportamento, anche se non penso che sia una buona soluzione in quanto ottieni la logica di visualizzazione in css e javascript. Tuttavia, a seconda delle tue esigenze, potresti scoprire che i css di jQuery ti semplificano la vita piuttosto che provare i css hacky, specialmente se stai cercando di farlo funzionare per IE6

    Ad esempio se hai due div nel documento XHTML. 

     
     
    hello, how are you?
     
     
    I am fine, thank you.

    Quindi prova questo in CSS. 

     #div1 > #div2 > p{ color: red; }

    influisce solo sul paragrafo ‘div2’. 

     #div1 > p { color: red; }

    influisce solo sul paragrafo ‘div1’.

    Non hai bisogno del riferimento di class per il li s. Invece di avere CSS come 

     li.top-level-nav { color:black; }

    tu puoi scrivere 

     ul#sidebar > li { color:black; }

    Questo applicherà lo styling solo a quelli che scendono immediatamente dalla barra laterale.

    basta riportarli ai loro valori predefiniti nel selettore “#sidebar ul li”