Como posso desativar os estilos CSS herdados?

Question

Então, estou criando um recipiente com cantos arredondados usando o seguinte método:

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;
}

Agora eu quero usar uma div dentro do meu contêiner:

.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>

No entanto, com eu coloquei uma div dentro das minhas divs aninhadas, o botão tem a imagem BL no canto.

Como faço para remover a imagem de fundo herdada?

Answer 1

A resposta simples é mudar

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

para

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

O motivo é porque quando você faz uma regra para div.rounded div div Isso significa todo div elemento aninhado dentro de um div dentro de a div com uma classe de rounded, independentemente do ninho.

Se você deseja atingir apenas uma div, esse é o descendente direto, você pode usar a sintaxe div.rounded div > div (Embora isso seja apoiado apenas por navegadores mais recentes).

Aliás, você geralmente pode simplificar este método para usar apenas dois divs (um para cima e inferior ou esquerdo e direito), usando uma técnica chamada Portas de correr.

Answer 2

A folha de estilo em cascata é projetada para herança. A herança é intrínseca à sua existência. Se não fosse construído para ser em cascata, eles seriam chamados apenas de "folhas de estilo".

Dito isto, se um estilo herdado não atender às suas necessidades, você terá que substituí -lo com outro estilo mais próximo do objeto. Esqueça a noção de "bloqueio de herança".

Você também pode escolher a solução mais granular, dando estilos a todos os objetos individuais e não dando estilos às tags gerais como div, p, pré, etc.

Por exemplo, você pode usar estilos que começam com # para objetos com um ID específico:

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

Você pode definir classes para objetos:

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

Espero que ajude.

Answer 3

A solução mais limpa é provavelmente especificar suas divs como crianças exatas.

Tente mudar isso:

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

Para isso:

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

Answer 4

Se você controlar o HTML e o CSS, sugiro mudar para usar o IDs em todos os divs necessários para o canto arredondado.

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 5

Dê ao div, você não quer que ele herde a propriedade fundo também.

Answer 6

O mais simples é classificar-se de todas as divs:

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 então use:

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