Annuler une déclaration CSS

Est-il possible d'avoir une règle CSS qui, en gros, "annule" la règle précédente?

Un exemple:

<blockquote>
    some text <em>more text</em> other text
</blockquote>

et disons qu'il y a ce CSS:

blockquote {
    color: red;
}

...mais je veux le <em> de rester à la normale couleur du texte (qui ne peut pas nécessairement le savoir).

En gros, y aurait-il un moyen de faire quelque chose de ce genre?

blockquote em {
    color: inherit-from-blockquote's-parent
}

Edit: Le code, je suis en train d'essayer d'obtenir que cela fonctionne sur est en réalité un peu plus compliqué. Peut-être que ce serait l'expliquer mieux:

This text should be *some unknown colour*
<ul>
    <li>This text should be BLUE
        <ul>
            <li>Same as outside the UL</li>
            <li>Same as outside the UL</li>
        </ul>
    </li>
</ul>

ul {
    color: blue;
}
ul ul {
    color: ???;
}

source d'informationauteur nickf

css

8

Avec CSS seul, vous ne pouvez pas se référer à un parent du parent.

La chose que vous pouvez faire est d'essayer un mélange de certains sélecteurs CSS et de balisage, de sorte que l'effet désiré s'affiche.
```
<td>
  This is the enclosing element.
  <ul>
    <li>This is the first level UL, direct child of TD
      <ul>
        <li>This is the second level UL</li>
        <li>Same as outside the UL</li>
      </ul>
    </li>
  </ul>
</td>
```
CSS:
```
td > ul
  color: blue; /* this affects the "direct child" UL only */
}
```
Vous permettrait de limiter la profondeur de l'héritage des styles à un niveau, par conséquent, l'intérieur de l'UL est non stylé en ce qui concerne les couleurs et obtient son installation à partir de l'affichage de texte.

En savoir plus sur le CSS Sélecteur d'Enfantet être conscient que les navigateurs plus anciens peuvent avoir leurs caprices avec eux.

MODIFIER

Pour Internet Explorer 6, le sélecteur d'enfant peut être faux dans une certaine mesure. Assurez-vous de fixer les ceintures de sécurité (les commentaires conditionnels ou similaire) avant d'utiliser ce:
```
td ul {
  color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black");
}
```
Cela suppose "noir" comme la couleur extérieure. Si cette valeur de couleur est sujet à changement, vous êtes hors de la chance, j'en ai peur. À moins que vous pouvez définir un expression() qui est en mesure d'obtenir la valeur de la couleur à partir du contexte (par exemple, la vérification de certaines autres propriétés de l'élément parent). Ou vous donnez et l'utilisation d'un JS cadre, comme quelqu'un l'a déjà suggéré.

Le wimpy solution sans avoir à utiliser de JS serait bien sûr:
```
td ul.first {
  color: blue;
}
```
Mais je peux voir pourquoi vous voulez éviter cela.
7

L'utiliser pour assurez-vous que la hériter remplace tout autre chose qui pourrait avoir été réglage de la couleur:
```
blockquote em {
    color: inherit !important;
}
```
2

Donner et l'utilisation d'un extrait de code de javascript pour détecter le style du parent et de le mettre? 🙂
1

Plutôt que d'essayer de forcer un sélecteur d'hériter de la police la couleur de son grand-père, je voudrais vous suggérer de donner le sélecteur et de son grand-père a partagé déclaration pour la couleur de la police.

Prendre la blockquote exemple, en supposant que le corps est la grand-parents:
```
body, blockquote em {
       color:[whatever];
}


blockquote {
       color:red;
}
```
Et, dans le cas des listes à puces, il serait:
```
body, ul ul {
       color:[whatever];
}


ul {
       color:blue;
}
```
0

Mon CSS est un peu rouillé, mais cela devrait fonctionner:
```
blockquote {
    color: red;
}

blockquote em {
    color: inherit;
}
```
Vous définissez les citations de rouge, mais tous les <em>'s qui sont contenues dans une blockquote devrait hériter... hmmm, devraient-ils hériter du texte qui l'entoure, ou de la blockquote?

Si le ci-dessus ne fonctionne pas comme vous le voulez, alors il n'y a aucun moyen de le faire avec le marquage en cours, je pense. Vous devez travailler avec une annotation supplémentaire, ou de définir la couleur explicitltly, par exemple
```
blockquote em {
        color: Purple;
} 
```
0

Ok, le texte supplémentaire avec un exemple pour illustrer la question beaucoup de choses. Et je suis peur que ce que vous voulez n'est pas possible.

Si vous connaissez "l'inconnu de la couleur" bien sûr, vous pouvez répéter la couleur. Mais je pense que le CSS besoins d'un mécanisme pour ajouter des variables ou des références.

De sorte que vous avez à coller à l'lourd:
```
ul {
  color: blue;
}
li ul {
  color: sameenvironment;  /* Sorry but you have to add the specific colour here */
}
```
0

Si vous pouvez modifier votre code html, vous pourriez essayer
```
<li><span>This text should be BLUE</span>
    <ul>
        <li>Same as outside the UL</li>
        <li>Same as outside the UL</li>
    </ul>
</li>
```
et le style
```
li span{
    color: blue;
}
```
MODIFIER
une autre façon d'atteindre cet objectif sans le supplément de la balise span:

Si nous supposons que nous avons un style de classe (ou de tout autre sélecteur) qui définit les parents de l'extérieur de l'ul. Nous pouvons modifier le css comme ceci:
```
.parentStyle,
.parentStyle li li{
     color:red;
}
li{
     color:blue;
}
```
0

Moi aussi j'avais cette question, mais après j'ai regardé les autres réponses, il m'a frappé,
```
    body {
        color : initial;
    }
```
IE ne prend pas en charge actuellement, et Gecko nécessite un -moz-initial je crois..
```
    body {
        color : unset;
    }
```
Ce n'est pas tout à fait aussi pris en charge maintenant. J'ai juste pensé que je vous ferais partager ma réponse à cette question pour quelqu'un d'autre qui pense à ce sujet.

Vous devez vous connecter pour publier un commentaire.