Come isolare un div da stili CSS pubblici?

ho del codice per esempio qui in html

   

Hi it's test

Hi it's test

se ho usato il seguente codice CSS per lo styling:

 img{ width:100px; height:100px; } h1{ font-size:26px; color:red; } 

la domanda è: come posso prevenire e isolare i tag all’interno del tag mydiv div dallo stile con lo stile dei tag pubblici?

CSS Cascading and Inheritance Level 3 introduce la proprietà shorthand e la parola chiave unset , che, insieme, ti permettono di ottenere ciò comodamente.

Ad esempio, se un autore specifica all: initial su un elemento, bloccherà tutta l’ereditarietà e reimposterà tutte le proprietà, come se non fosse stata visualizzata alcuna regola nei livelli autore, utente o user-agent della cascata.

Questo può essere utile per l’elemento radice di un “widget” incluso in una pagina, che non desidera ereditare gli stili della pagina esterna. Si noti, tuttavia, che qualsiasi stile “predefinito” applicato a quell’elemento (come ad esempio display: block dal foglio di stile UA su elementi di blocco come

) verrà anch’esso spazzato via.

Avrai bisogno di applicare all: initial al tuo div e all: unset ai suoi discendenti:

 #mydiv { all: initial; /* blocking inheritance for all properties */ } #mydiv * { all: unset; /* allowing inheritance within #mydiv */ } 

Potresti voler utilizzare una class sul tuo div anziché su un id, in modo che qualsiasi regola scritta per lo stile dei suoi discendenti non debba corrispondere o battere l’alta specificità usata in questa regola.

Per essere veramente sicuri, potresti voler bloccare anche gli stili su potenziali discendenti di pseudo-elementi:

 #mydiv::before, #mydiv::after, #mydiv *::before, #mydiv *::after { all: unset; } 

In alternativa, per un supporto browser più ampio, puoi tentare manualmente di fare ciò che all fanno impostando tutte le proprietà CSS conosciute (non dimenticare le versioni con prefisso):

 #mydiv { /* * using initial for all properties * to totally block inheritance */ align-content: initial; align-items: initial; align-self: initial; alignment-baseline: initial; animation: initial; backface-visibility: initial; background: initial; ... } #mydiv::before, #mydiv::after, #mydiv *, #mydiv *::before, #mydiv *::after { /* * using inherit for normally heritable properties, * and initial for the others, as unset does */ align-content: initial; align-items: initial; align-self: initial; ... color: inherit; ... } 

Puoi incoraggiare il supporto del browser per all proprietà abbreviate e tracciarne l’adozione con i seguenti link:

  • ☑ Chrome 37+
  • ☑ Firefox 27+
  • ☑ Webkit (Safari 9.1+)
  • ☐ Internet Explorer
  • ☐ Bordo
  • ☑ Opera 24+

Informazioni aggiornate sul supporto del browser per all proprietà abbreviate sono disponibili qui .

Non puoi tecnicamente, è così che i CSS dovrebbero funzionare. Se esiste uno stile definito per il tag div nel tuo foglio di stile, verrà applicato a tutti gli elementi div.

Poche cose che puoi provare non sono in stile con il nome del tag, invece di dare un nome alla class e dare una dichiarazione di stile alla class. in modo che tu possa accertarti di dove andranno tutti gli stili.

O. se vuoi qualche specifico tag Div per non avere lo stile mentre altri Div devono avere. puoi sempre resettarlo assegnando un nome o ID di class diverso e resettare le dichiarazioni di stile

Una cosa che potrebbe essere utile è il selettore di bambini diretti CSS , disponibile in tutti i browser incluso IE7 +. Ciò ti consente di applicare uno stile che non scenda a cascata nei bambini. Ad esempio nel tuo codice puoi usare questo CSS:

 body > img { width:100px; height:100px; } body > h1 { font-size:26px; color:red; } 

E che il CSS si applicherebbe solo agli elementi direttamente sull’elemento BODY.

Vecchia domanda, ma le cose sono cambiate un po ‘dopo la risposta accettata. Esiste ora una parola chiave raccomandata da CSSWG chiamata revert che sarebbe più adatta di quella initial e unset per risolvere questo problema, poiché reimposta la proprietà di un elemento sul valore definito nel foglio di stile dell’agente utente piuttosto che sul valore iniziale della proprietà indipendentemente da quale elemento su cui è usato. Ad esempio, un div all’interno di #mydiv avrà il suo display impostato su block come ci aspetteremmo e non è in inline .

Dovresti fare questo:

 #mydiv, #mydiv::before, #mydiv::after, #mydiv * #mydiv *::before, #mydiv *::after { all: revert; } 

Purtroppo, il revert non è supportato da alcun browser diverso da Safari (per Mac e iOS) al momento della scrittura.

C’è anche qualcos’altro da prendere in considerazione per quanto riguarda la risposta accettata. Se vuoi #mydiv qualcosa all’interno di #mydiv , devi farlo con un selettore almeno specifico come quello che hai usato per annullare o annullare tutto, altrimenti verrà sovrascritto da quella regola, anche se viene dopo di essa nel CSS.

Quindi avresti bisogno di fare qualcosa di simile (nota il #mydiv che aumenta la specificità delle regole):

 #mydiv p { margin-top: 20px; } #mydiv .bg-black { background-color: black; } // etc.