Question Comment puis-je 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 dans 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 un div dans mes divs imbriqués, le bouton a l'image bl dans le coin.

Comment supprimer l'image de fond héritée?


24
2018-06-26 00:40


origine


Réponses:


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 faites une règle pour div.rounded div div ça veut dire chaque  div élément imbriqué dans un div à l'intérieur d'un div avec une classe de rounded, indépendamment de la nidification.

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 supporté que par les navigateurs plus récents).

Incidemment, vous pouvez généralement simplifier cette méthode pour n'en utiliser que deux. divs (une pour le haut et le bas ou la gauche et la droite), en utilisant une technique appelée Portes coulissantes.


9
2018-06-26 00:44



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 mis en cascade, ils ne seraient appelés 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 attribuant des styles à chaque objet, sans donner de style aux balises générales telles que div, p, pre, etc.

Par exemple, vous pouvez utiliser des styles commençant 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 cela aide.


7
2018-06-26 00:59



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

Essayez de changer cela:

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

5
2018-06-26 00:50



Si vous contrôlez à la fois le HTML et le CSS, je vous suggère de passer à l’utilisation des identifiants sur tous les divs nécessaires au 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
2018-06-26 01:05



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


0
2018-06-26 00:45



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

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
2018-06-26 02:57