Comment puis-je désactiver les styles CSS hérités?

Question

Je crée donc un conteneur avec des coins arrondis en utilisant la méthode suivante:

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

Maintenant, je veux utiliser une div à l'intérieur de mon conteneur:

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

Cependant, si je mets une div à l'intérieur de mes div imbriquées, le bouton a l'image bl dans le coin.

Comment puis-je supprimer l'image d'arrière-plan héritée?

Answer 1

La réponse simple est de changer

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

à

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

La raison en est que, lorsque vous définissez une règle pour div.rounded div div, cela signifie chaque div élément imbriqué dans un rounded dans un div.rounded div > div avec une classe de <=>, < em> indépendamment de l'imbrication .

Si vous souhaitez uniquement cibler un div qui est le descendant direct, vous pouvez utiliser la syntaxe <=> (bien que cela ne soit pris en charge que par les navigateurs plus récents).

Incidemment, vous pouvez généralement simplifier cette méthode en n’utilisant que deux <=> s (un en haut, en bas ou à gauche et à droite), en utilisant une technique appelée Portes coulissantes .

Answer 2

Les feuilles de style en cascade sont conçues pour l'héritage. L'héritage est intrinsèque à leur existence. S'il n'était pas conçu pour être en cascade, elles ne s'appelleraient que & "Feuilles de style &";

Cela dit, si un style hérité ne répond pas à vos besoins, vous devrez le remplacer par un autre style plus proche de l'objet. Oubliez la notion de & Quot; blocage de l'héritage & Quot;.

Vous pouvez également choisir la solution la plus granulaire en attribuant des styles à chaque objet et non aux styles en tant que balises générales telles que div, p, pre, etc.

Par exemple, vous pouvez utiliser des styles commençant par # pour les objets ayant un ID spécifique:

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

Vous pouvez définir des classes pour des objets:

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

J'espère que ça aide.

Answer 3

La solution la plus propre est probablement de spécifier vos divs comme des enfants exacts.

Essayez de changer ceci:

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

À ceci:

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

Answer 4

Si vous contrôlez le HTML et le CSS, je vous suggérerais de passer aux identifiants sur tous les div requis pour le coin arrondi.

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

Indiquez également à la div que vous ne voulez pas qu'elle hérite de la propriété Arrière-plan .

Answer 6

Le plus simple est de classer si tous les divs sont classés:

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

Et utilisez ensuite:

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