web-dev-qa-db-fra.com

Comment désactiver les styles CSS hérités?

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 un 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, avec j'ai mis un div à l'intérieur de mes div imbriqués, le bouton a l'image bl dans le coin.

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

htmlcssstylesheet
29
Jack B Nimble

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 créez une règle pour div.rounded div div cela signifie chaque div élément imbriqué dans un div dans un div avec une classe de rounded, quelle que soit l'imbrication.

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

Soit dit en passant, vous pouvez généralement simplifier cette méthode pour n'utiliser que deux div (un pour chacun en haut et en bas ou à gauche et à droite), en utilisant une technique appelée Portes coulissantes .

11
Aupajo

La feuille de style en cascade est conçue pour l'héritage. L'héritage est intrinsèque à leur existence. Si elle n'était pas conçue pour être en cascade, elles ne seraient appelées que "Feuilles de style".

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

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

Par exemple, vous pouvez utiliser des styles qui commencent par # pour les objets avec un ID spécifique:

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

Vous pouvez définir des classes pour les objets:

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

J'espère que ça aide.

8
Wadih M.

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

Pour ça:

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

Si vous contrôlez à la fois le HTML et le CSS, je vous suggère de passer à l'utilisation d'ID sur toutes les divs nécessaires 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>
2
acrosman

Le plus simple est de classer toutes les 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;
}

Et puis utilisez:

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

Donnez au div que vous ne voulez pas qu'il hérite de la propriété background aussi.

0
Itay Moav -Malimovka