Come posso disabilitare gli stili css ereditati?

Question

Quindi io sono la creazione di un contenitore con angoli arrotondati utilizzando il seguente metodo:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div div div { 
    padding: 10px; 
} 

Ora voglio usare un div all'interno del mio contenitore:

.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

<div class='round'><div><div><div> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Tuttavia, con Ho messo un div all'interno del mio div annidato, il pulsante ha l'immagine bl nell'angolo.

Come rimuovere l'immagine di sfondo ereditata?

Answer 1

La risposta più semplice è quello di cambiare

div.rounded div div div { 
    padding: 10px; 
} 

a

div.rounded div div div { 
    background-image: none; 
    padding: 10px; 
} 

La ragione è che quando si effettua una regola per div.rounded div div significa ognidiv elemento nidificato all'interno di un div all'interno di un div con una classe di rounded, indipendentemente dall'annidamento.

Se si desidera indirizzare solo un div che discende direttamente, è possibile utilizzare la sintassi div.rounded div > div (sebbene questo sia supportato solo dai browser più recenti).

Per inciso, di solito è possibile semplificare questo metodo per utilizzare solo due div s (uno per l'alto e il basso o il sinistro e il destro), utilizzando una tecnica denominata Sliding Doors.

Answer 2

Dare il div non si vuole che erediti la proprietà sfondo troppo.

Answer 3

La soluzione più pulita è probabilmente quella di specificare i propri div come figli esatti.

Prova a cambiare questo:

div.rounded div div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

A tal:

div.rounded > div > div { 
    background: url('bl.gif') no-repeat bottom left; 
} 

Answer 4

Cascading Style Sheet sono progettati per l'eredità. L'ereditarietà è intrinseca alla loro esistenza. Se non fosse stato costruito per essere a cascata, si chiamerebbero solo "fogli di stile".

Detto questo, se uno stile ereditato non soddisfa le tue esigenze, dovrai sostituirlo con un altro stile più vicino all'oggetto. Dimentica la nozione di "blocco dell'eredità".

È inoltre possibile scegliere la soluzione più granulare assegnando stili a ogni singolo oggetto e non dando stili ai tag generali come div, p, pre, ecc.

Ad esempio, è possibile utilizzare gli stili che iniziano con # per gli oggetti con uno specifico ID:

<style> 
#dividstyle{ 
    font-family:MS Trebuchet; 
} 
</style> 
<div id="dividstyle">Hello world</div> 

È possibile definire le classi per gli oggetti:

<style> 
.divclassstyle{ 
    font-family: Calibri; 
} 
</style> 
<div class="divclassstyle">Hello world</div> 

Speranza che aiuta.

Answer 5

Se si controlla sia l'HTML sia il CSS, suggerirei di passare all'utilizzo degli ID su tutti i div necessari per l'angolo arrotondato.

CSS

#d1 { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
#d2 { 
    background: url('br.gif') no-repeat bottom right; 
} 
#d3 { 
    background: url('bl.gif') no-repeat bottom left; 
} 
#d4 { 
    padding: 10px; 
} 

HTML

<div id="d1"><div id="d2"><div id="d3"><div id="d4"> 
    <div class='button'><a href='#'>Test</a></div> 
</div></div></div></div> 

Answer 6

semplice è quella di classe Ify tutti i div:

div.rounded { 
    background: #CFFEB6 url('tr.gif') no-repeat top right; 
} 
div.rounded div.br { 
    background: url('br.gif') no-repeat bottom right; 
} 
div.rounded div.br div.bl { 
    background: url('bl.gif') no-repeat bottom left; 
} 
div.rounded div.br div.bl div.inner { 
    padding: 10px; 
} 
.button { 
    border: 1px solid #999; 
    background:#eeeeee url(''); 
    text-align:center; 
} 
.button:hover { 
    background-color:#c4e2f2; 
} 

e quindi utilizzare:

<div class='round'><div class='br'><div class='bl'><div class='inner'> 
<div class='button'><a href='#'>Test</a></div> 
</div></div></div></div>